There are lot of UI libraries out there. Their goal is to speed up development by providing a design system and accessibility right out of the box. The design system comes with a tradeoff: it helps speed up development since the developers don’t need to create their own design system from scratch but it can be very restrictive with customization, which makes sites built with that library look similar to each other. It’s easy to identify which sites were built using Bootstraps, for example. This tradeoff is acceptable for developers who are not good at frontend and their sites’ features rely more on the backend.
Lately there has been more headless (i.e. ‘unstyled’) UI libraries that provides the accessibility with very minimal or no styling so devs can style it however they want. They provide features such as keyboard navigation, labels and attributes for screen readers, and focus management I have been perusing through some of them to incorporate into my own tech stack. Here are 4 libraries I looked at and my thoughts on them.
Tailwind - Headless UI
- Component based - must be assembled in a certain way
- Incremental installation - can install install individual components instead of whole library
- Minimal - only 10 components at time of writing
- Tailwind has Tailwind UI, which is styled and fully customizable components but with no behavior
Radix UI - Primitives
- Component based
- Incremental installation
- Radix UI Themes - minimally styled component library that is more of a superset of Primitives
- ShadCN UI - 3rd party minimally styled component library built with Radix Primitives
Adobe - React ARIA
- Provides hooks that returns props to be assigned to corresponding elements
- Documentation explains thoroughly how to use the hooks and the problems they solve
- Complete visibility and control over DOM structure
- State management decoupled from accessibility behavior - provided by React Stately hooks
- React Spectrum - component library built with React Aria and React Stately - documentation is confusing since there is a component section in React Aria that is nearly identical to React Spectrum
- NextUI - 3rd party minimally styled component library built with React ARIA
Material - Base UI
- Behavior and accessibility logic decoupled from Material UI
- Material UI - completely styled component library and follows Google’s Material Design design system
- Provides components like Tailwind and Radix
- Provides hooks like React Aria
- In beta - certain components are not complete or are experimental. Documentation is lacking, especially for hooks.
My winner is React ARIA
My main problem with the other libraries is that I have to learn and think in their design system whereas with React ARIA, I’m thinking in native HTML.
For example, Radix’s Dialog component has 8 pieces: Root, Trigger, Portal, Overlay, Content, Title, Description, Close. It abstracts away the state management, logic and behavior, and HTML elements with these pieces that I have to assemble in a specific way.
And tweaking their behavior is exposed through certain props, not DOMAttribtues.
With React ARIA, it’s a lot more code I have to write but working with semantic HTML and attributes makes me a better frontend engineer overall. With Radix, Tailwind, and Material, I only get better at using their library - knowing Dialog.Content must wrap around Dialog.Title and Dialog.Description does not transfer to anything else. Additionally, I can intuit what the hooks do and see what their return values do. It reminds me of React Hook Form in this way.
This is a lot more boilerplate than other libraries but it makes more natural sense to me.
As Tailwind makes you think in native CSS, I want to think in native HTML elements as much as possible.
Also, React ARIA documentation is superb - it lists all the features of the hooks and provides an anatomy diagram for each UI component.
Conclusion
Thinking about accessibility is hard. Implementing them is harder. Keeping up with guidelines and thinking of different devices take up lot of time and research. It requires lot of boilerplate code and is very easy to get wrong. That’s why I highly recommend using one of these libraries so people that require on assistive technology to browse the internet can do so easily on your site. If React ARIA seems too daunting, I recommend Radix Primitives since it has more features and documentation than Headless UI and Base UI.
Top comments (0)