Radix UI

What Is Radix UI?

Radix UI is a library of unstyled, accessible React UI primitives for building high-quality design systems. Created by the team at WorkOS, Radix provides the behavior, accessibility, and interaction patterns of complex components without imposing any visual design, allowing teams to apply their own styling system.

Unstyled Primitives

Radix components handle the complex parts of UI development: focus management, keyboard navigation, screen reader announcements, dismissal behavior, animation states, and collision-aware positioning. Styling is left entirely to the developer, whether through CSS, Tailwind, CSS-in-JS, or any other approach.

Accessibility

Every primitive follows WAI-ARIA authoring practices. Dialog manages focus trap and restore. Dropdown Menu supports keyboard navigation with typeahead. Popover handles screen reader announcements. These accessibility features work automatically without additional developer effort.

Component Primitives

Primitives include Accordion, Alert Dialog, Aspect Ratio, Avatar, Checkbox, Collapsible, Context Menu, Dialog, Dropdown Menu, Hover Card, Label, Menubar, Navigation Menu, Popover, Progress, Radio Group, Scroll Area, Select, Separator, Slider, Switch, Tabs, Toast, Toggle, Toggle Group, and Tooltip.

Composition

Radix components expose their internal parts as separate elements that can be styled and arranged independently. This composition model provides granular control over structure and appearance while maintaining correct behavior and accessibility.

Why Choose Radix UI

Teams building custom design systems who need accessible, well-engineered component behavior without prescribed styling choose Radix UI. It provides the hardest-to-build parts of UI components while leaving visual design decisions to the team.