Radix UI

Radix UI is an open-source React component library of accessible, unstyled UI primitives — WAI-ARIA compliant, fully customizable, and performance-optimized for production-grade design systems.

What is Radix UI?

Radix UI is a collection of low-level, unstyled React primitives for building accessible, high-quality user interfaces. Unlike opinionated component libraries, Radix UI gives you full control over styling while handling all the complex accessibility logic — keyboard navigation, focus management, ARIA attributes — out of the box.

It is the foundation used by popular design systems including shadcn/ui and Origin UI.

Key Features

Accessible by default — Every component adheres to WAI-ARIA design patterns, ensuring inclusivity for all users including those using screen readers
Unstyled primitives — Ship with zero styles, so you can apply any design system or CSS framework (Tailwind, CSS Modules, styled-components)
Composable API — Fine-grained component parts (Root, Trigger, Content, etc.) that you compose to build exactly what you need
Animated-ready — Built to work with CSS animations and libraries like Framer Motion
TypeScript first — Full TypeScript support with accurate types

Available Components

Radix UI primitives include:

Dialog, Drawer, Alert Dialog
Dropdown Menu, Context Menu, Navigation Menu
Tooltip, Popover, Hover Card
Select, Combobox, Radio Group, Checkbox, Switch
Accordion, Tabs, Collapsible
Slider, Scroll Area, Separator
Toast, Progress, Avatar, Aspect Ratio

Why Choose Radix UI?

Radix UI solves one of the hardest UI engineering problems: accessibility. Instead of building dropdown menus, dialogs, and tooltips from scratch and getting keyboard interactions wrong, Radix handles it all correctly while you focus on visual design.

It's the go-to choice for teams who want design freedom + accessibility compliance without maintaining their own accessible component logic.