Radix UI
A library of unstyled, accessible UI primitives for React. Radix provides the behavior (accessibility, keyboard nav, focus management) — you bring the styles. Used by shadcn/ui, Linear, and many design systems. The best foundation for custom component libraries.
Modulz (now WorkOS) · Created Radix UI
- Building custom component libraries.
- When accessibility matters.
- React + Tailwind stacks.
- When you want full styling control.
- When you want pre-styled components (use shadcn/ui or MUI).
- Non-React projects.
- Quick prototypes (too much work).
Definition
Radix UI provides low-level primitives (Dialog, Dropdown, Tooltip, Tabs, etc.) with full accessibility — keyboard nav, screen reader support, focus management — but no styles. You style with CSS, Tailwind, or any approach. The foundation for shadcn/ui.
Why it exists
Building accessible components from scratch is hard (focus traps, keyboard nav, ARIA). Radix solves the hard part so you can focus on design and logic.
How it works
Install @radix-ui/react-* packages. Use primitives as building blocks: <Dialog.Root>, <Dialog.Trigger>, <Dialog.Content>. They handle state, accessibility, and behavior. You add styles via Tailwind/CSS. Compose into your own components.
Scaling limits
Unstyled — you must style everything. More work than pre-styled libraries. React-only. Some primitives are complex to use correctly.
Cost shape
Free and open source.
Alternatives
- shadcn/ui — Pre-styled Radix components, copy-paste.
- Headless UI — Similar unstyled primitives, smaller library.
- Material UI — Pre-styled, harder to customize.
Failure modes
- Must style everything yourself.
- React-only.
- Learning curve for complex primitives.