Radix UI

Language: JavaScript

UI Framework

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.

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.

Installation

npm: npm install @radix-ui/react-* // Replace * with the specific component (e.g., dropdown-menu, dialog, slider)

yarn: yarn add @radix-ui/react-*

cdn: Radix UI does not provide a CDN build; install via npm or yarn.

manual: Install individual Radix UI packages and import them into your React project as needed.

Usage

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.

Dialog (Modal)

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>

Creates an accessible modal dialog using Radix UI primitives, with custom styling applied via classes.

Dropdown Menu

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>

Implements an accessible dropdown menu with items. Styling is entirely customizable.

Slider component

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>

Creates a fully accessible slider component with keyboard and mouse support.

Tabs

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>

Implements an accessible tabbed interface with ARIA roles and keyboard navigation built in.

Error Handling

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.

Official Docs Github