Building accessible, interactive UI components from scratch is time-consuming and error-prone. Unstyled (headless) component libraries provide the behavior and accessibility; you provide the styles.
Library Overview
Radix UI: By WorkOS. Comprehensive primitive library. Powers shadcn/ui.
Headless UI: By Tailwind Labs. Designed to pair with Tailwind CSS. Smaller component set.
Ark UI: By the Chakra UI team. State machine-based. Supports React, Vue, and Solid.
Component Coverage
| Component | Radix UI | Headless UI | Ark UI |
|---|---|---|---|
| Dialog/Modal | Yes | Yes | Yes |
| Dropdown Menu | Yes | Yes | Yes |
| Tabs | Yes | Yes | Yes |
| Accordion | Yes | No | Yes |
| Tooltip | Yes | No | Yes |
| Popover | Yes | Yes | Yes |
| Select | Yes | Yes | Yes |
| Combobox | No | Yes | Yes |
| Slider | Yes | No | Yes |
| Switch/Toggle | Yes | Yes | Yes |
| Checkbox | Yes | No | Yes |
| Radio Group | Yes | Yes | Yes |
| Toast | Yes | No | Yes |
| Navigation Menu | Yes | No | No |
| Context Menu | Yes | No | No |
| Hover Card | Yes | No | Yes |
| Color Picker | No | No | Yes |
| Date Picker | No | No | Yes |
| File Upload | No | No | Yes |
| Total components | ~28 | ~10 | ~40+ |
Technical Comparison
| Factor | Radix UI | Headless UI | Ark UI |
|---|---|---|---|
| Framework support | React only | React, Vue | React, Vue, Solid |
| Styling approach | Agnostic | Designed for Tailwind | Agnostic |
| Bundle size (Dialog) | ~5 KB | ~3 KB | ~8 KB |
| API style | Compound components | Render props + compounds | Compound components |
| State management | Internal React state | Internal | State machines (xstate) |
| Animation support | Data attributes | Transition component | Data attributes |
| TypeScript | Full | Full | Full |
| SSR support | Yes | Yes | Yes |
| Accessibility | WAI-ARIA (excellent) | WAI-ARIA (excellent) | WAI-ARIA (excellent) |
| shadcn/ui | Powers it | Inspiration | Chakra UI integration |
When Radix Wins
- shadcn/ui projects: It is the foundation
- React-only projects: Best React component coverage
- Complex menus: Navigation Menu, Context Menu are unique
- Design system building: Excellent composition API
- Community adoption: Most popular headless library
When Headless UI Wins
- Tailwind CSS projects: Made by the Tailwind team
- Vue projects: First-class Vue support
- Minimal bundle: Smallest library size
- Simple needs: 10 components cover most UI patterns
- Transition support: Built-in Transition component
When Ark UI Wins
- Most components: 40+ components including date picker, color picker
- Multi-framework: React, Vue, and Solid from one library
- Complex interactions: State machine architecture handles edge cases
- Chakra UI migration: Natural upgrade path
Our Choice
We use Radix UI via shadcn/ui for all React projects. The combination of Radix primitives with shadcn/ui's copy-paste components gives us accessible, customizable UI that we own completely. No library lock-in, full design control.
Build your component library with accessible, custom components.