Radix UI
Unstyled, accessible component primitives — behaviour without opinions about appearance.
What it is
Radix UI is a low-level component library for building accessible, unstyled UI primitives in React. It provides the behavior, accessibility, and logic, leaving full control of styling to developers.
Radix UI provides unstyled, accessible primitives such as Dialog, DropdownMenu, Slider, Tabs, Tooltip, and Popover. These primitives manage the logic and accessibility while leaving design and styling to developers.
- Licence
- MIT
- Best known for
- Accessibility done properly — focus traps, ARIA, keyboard interaction
When to use it
The question documentation cannot answer for you — because it cannot recommend something else.
Reach for it when
- You have a custom design and need dialogs, dropdowns and tooltips that are genuinely accessible
- You want keyboard navigation and focus management handled correctly, which is harder than it looks
Look elsewhere when
- You want components that already look finished — Radix ships no styles at all
Installation
npm install @radix-ui/react-* // Replace * with the specific component (e.g., dropdown-menu, dialog, slider)Getting started
The smallest useful thing you can do with it, and what each part means.
import * as Dialog from '@radix-ui/react-dialog';
<Dialog.Root>
<Dialog.Trigger>Open Dialog</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="overlay" />
<Dialog.Content className="content">
<Dialog.Title>Radix Dialog</Dialog.Title>
<Dialog.Description>This is a Radix UI modal.</Dialog.Description>
<Dialog.Close>Close</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
<DropdownMenu.Root>
<DropdownMenu.Trigger>Options</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item>Edit</DropdownMenu.Item>
<DropdownMenu.Item>Delete</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>Advanced usage
Where the library earns its place over a simpler alternative.
import * as Slider from '@radix-ui/react-slider';
<Slider.Root defaultValue={[50]} max={100} step={1} className="slider">
<Slider.Track className="slider-track">
<Slider.Range className="slider-range" />
</Slider.Track>
<Slider.Thumb className="slider-thumb" />
</Slider.Root>import * as Tabs from '@radix-ui/react-tabs';
<Tabs.Root defaultValue="tab1">
<Tabs.List>
<Tabs.Trigger value="tab1">Tab One</Tabs.Trigger>
<Tabs.Trigger value="tab2">Tab Two</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="tab1">Content 1</Tabs.Content>
<Tabs.Content value="tab2">Content 2</Tabs.Content>
</Tabs.Root>Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- Component renders unstyled
- Radix UI provides only logic and accessibility; you must add your own CSS or utility classes.
- Focus not working correctly
- Ensure you are using Radix UI’s Portal and Overlay components as documented.
- Invalid import error
- Install and import the specific package (e.g., `@radix-ui/react-dialog`) instead of the full library.
Best practices
- Use Radix UI when building custom design systems that need strong accessibility features.
- Combine Radix UI with a styling framework like Tailwind CSS, Stitches, or vanilla CSS.
- Leverage Radix’s Portal components to render modals, tooltips, and popovers outside of parent containers.
- Maintain consistent styling by wrapping Radix primitives with your own styled components.
- Follow Radix UI’s accessibility guidelines to ensure inclusive experiences.
Alternatives
Comparable options, and the reason you would pick one over the other.
Background
Why it exists, and what it was reacting to.
Radix UI was developed by Modulz as part of their mission to create accessible design tools. Unlike pre-styled component libraries, Radix UI focuses on delivering headless, unstyled components with built-in accessibility features such as keyboard navigation, focus management, and ARIA attributes. This makes it a flexible choice for teams building fully custom design systems.