Radix UI
Radix UI is a library of low-level, unstyled, accessible React component primitives — such as dialogs, dropdowns, and tooltips — that handle behavior and accessibility while leaving all visual styling to the developer.
Definition
Radix UI is a library of low-level, unstyled, accessible React component primitives — such as dialogs, dropdowns, and tooltips — that handle behavior and accessibility while leaving all visual styling to the developer.
Overview
Radix UI takes a different approach from all-in-one component libraries like Material UI or Ant Design (web): rather than shipping opinionated styles, it provides unstyled "primitives" for common interactive patterns — dialog, popover, dropdown menu, tooltip, accordion, and more — that correctly implement keyboard navigation, focus management, and ARIA attributes. Developers are responsible for all visual styling, typically using CSS Modules, Tailwind CSS, or a CSS-in-JS solution. This unstyled, behavior-first design makes Radix UI a popular foundation for custom design systems, since teams get correct, well-tested accessibility behavior without inheriting someone else's visual opinions. It occupies similar territory to Headless UI, though Radix offers a broader set of primitives and more granular composition through sub-components. Radix UI's primitives are also the foundation underneath shadcn/ui, a popular pattern for copying pre-styled, customizable component code (often paired with Tailwind CSS) directly into a project rather than installing a packaged library — which has made Radix a common building block in modern React and Next.js projects.
Key Features
- Unstyled component primitives with no default visual design
- WAI-ARIA-compliant accessibility, keyboard navigation, and focus management built in
- Composable sub-component API (e.g., Dialog.Root, Dialog.Trigger, Dialog.Content)
- Full control over styling via any CSS approach, including Tailwind CSS or CSS Modules
- Portal, focus-trap, and collision-detection utilities for overlays and popovers
- Wide coverage of common interactive UI patterns (dialogs, menus, tooltips, accordions, sliders)
- Foundation for popular styled component patterns like shadcn/ui