Component taxonomy 💡

[andrecasal]

Hey everyone 👋

I feel like a clear mental model for component categories would help make UI libraries more understandable, ease the search and choice of which components to use when, and establish a common language between designers and developers.

So I've done some research on component taxonomy and came up with these categories and their definitions:

• Layout - components that pertain to app structure.
• Modals - components that block interaction with the rest of the app.
• Overlays - components that float on top and cover the app.
• Navigations - components means to navigate between app routes.
• Disclosure - components that conditionally show or hide information.
• Typography - components that pertain to typography.
• Media - components that pertain to image, video, and audio.
• Notifications - components that pertain to peripheral messages.
• Status - components that pertain to the state of the app.
• Data Display - components to display complex data structures.
• Data Entry - components for data input.

There are still some violations to these category definitions like the Button, Label and Fieldset components, which aren't "data entry".

I'd love to have a discussion (possibly also a live one-on-one with someone from Radix) around this topic, if you feel like this would be helpful in making Radix and other UI libraries better.