React
Radix vs Base UI vs React Aria: what actually changes
Three primitives, three contracts. The difference is not the component count, it is how they handle state, accessibility and composition, and who owns it.
Key points
- Radix, Base UI and React Aria are not interchangeable: the API, the state model and the composition differ.
- The right question is which contract you want to keep inside your design system.
- Test focus, Escape, aria attributes and composition, not just how the component looks.
Radix, Base UI and React Aria are often compared as if they were three boxes of buttons. In fact they are three ways of thinking about behaviour: who owns the state, how a menu composes, and where accessibility lives.
Three contracts, not three libraries
Radix exposes composable primitives with a declarative API. Base UI carries a similar model on a newer base. React Aria puts the weight on accessible behaviour and hooks, leaving more freedom (and more work) to the design.
| Criterion | Radix | Base UI | React Aria |
|---|---|---|---|
| Model | Composable primitives | Composable primitives | Hooks + components |
| Styling | Bring your own | Bring your own | Bring your own |
| Accessibility | Built in | Built in | Very explicit |
| Learning curve | Medium | Medium | Higher |
| Exit | Depends on the primitives you use | Depends on the primitives you use | More code of your own |
What to test in 15 minutes
- Open a dialog with Tab and close it with Escape.
- Check where focus returns.
- Open a menu with the keyboard and look for the next item.
- Check `aria-expanded`, `aria-controls` and `aria-labelledby`.
- Try a form with an error and read the screen reader announcement.
The choice depends on the design system
If you already have a strong visual language, React Aria gives you the behaviour and leaves you the control. If you want ready primitives and a large community, Radix is the shortest path. Base UI makes sense if you want a newer base and accept a smaller community.
How to check it in the catalogue
Open the comparisons and look for libraries that use the primitive you are evaluating. Then open a real component and try the preview with the keyboard: the docs say what should happen, the component says what does.
Frequently asked questions
Is Radix better than React Aria?
No, they solve the same problem with different contracts. Radix is faster to adopt; React Aria gives more control over behaviour and accessibility.
Does Base UI replace Radix?
Not automatically. Base UI is a newer base, but migrating means rewriting APIs and tests, not changing an import.
Which one should I use for an internal design system?
React Aria if you want total control; Radix if you want ready primitives and a large community. Write the choice into the design system instead of leaving it to each component.
Is accessibility guaranteed?
No. Primitives help, but contrast, copy, focus order and states depend on how you use them.
Can I mix Radix and React Aria?
Technically yes, but avoid mixing them for the same kind of control. Two focus models in one product are a debt.