Radix UI
Unstyled, accessible React UI component primitives. Radix UI provides the behavioral and accessibility logic for complex UI components (Dialog, Dropdown, Tooltip, Select, etc.) with zero styling opinions. Applications style components with CSS, Tailwind, or CSS-in-JS. Radix handles ARIA attributes, keyboard navigation, focus management, and screen reader support — the hard parts of accessible UI — so developers don't have to. Powers shadcn/ui, which adds Tailwind styling on top.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
Local library — no network access. WorkOS maintains with security-conscious practices. MIT licensed. No data collection.
⚡ Reliability
Best When
You're building a custom design system or component library in React and want correct accessibility (ARIA, keyboard nav) for complex interactive components without implementing it yourself.
Avoid When
You want pre-styled components, use a non-React framework, or your components are simple enough that Radix's overhead isn't justified.
Use Cases
- • Build custom design system components with fully accessible behavior using Radix primitives as the behavioral foundation
- • Implement complex accessible UI patterns (modals, dropdowns, command palettes, popovers) without implementing ARIA roles and keyboard navigation manually
- • Use as the foundation for shadcn/ui which adds Tailwind CSS styling on top of Radix primitives for a complete component system
- • Create enterprise-grade React UIs that meet WCAG accessibility standards without a dedicated accessibility specialist
- • Build component libraries for agent-facing dashboards or admin panels with correct accessibility semantics
Not For
- • Non-React frameworks — Radix UI is React-only
- • Applications needing pre-styled components out of the box — Radix is unstyled; use shadcn/ui or MUI for pre-styled components
- • Simple static pages without interactive components — Radix overhead not justified for basic HTML content
Interface
Authentication
Local library — no authentication.
Pricing
Radix UI Primitives and Radix Themes are both MIT open source from WorkOS. Radix Colors (the color system) is also MIT licensed.
Agent Metadata
Known Gotchas
- ⚠ Radix uses a compound component pattern — Dialog.Root, Dialog.Trigger, Dialog.Content must be properly nested; placing Dialog.Content outside Dialog.Root silently breaks behavior
- ⚠ Each Radix component must be installed separately (@radix-ui/react-dialog, @radix-ui/react-dropdown-menu) — there is no single Radix UI package; install only what you use
- ⚠ Radix components have no styling — they render invisible or unstyled by default; developers must provide all CSS/Tailwind styles for the components to be visible
- ⚠ Portal rendering (Dialog, Tooltip, Popover) renders to document.body by default — this can conflict with z-index stacking contexts; use container prop to render in a specific DOM location
- ⚠ Form integration requires using Radix Form primitives or wrapping Radix components in react-hook-form's Controller — Radix inputs are not standard HTML inputs
- ⚠ asChild prop composes Radix behavior onto an existing element — misuse of asChild with incompatible elements causes React ref forwarding errors
Alternatives
Full Evaluation Report
Detailed scoring breakdown, competitive positioning, security analysis, and improvement recommendations for Radix UI.
Scores are editorial opinions as of 2026-03-06.