Skip to main content

Build accessible design systems with Radix UI Primitives

An open-source UI component library providing unstyled, accessible components for building high-quality design systems and web apps in React.

Get StartedBrowse Components

Quick Start

Get up and running with Radix UI Primitives in minutes

1

Install a component

Install individual components from npm. Each component is a separate package.
npm install @radix-ui/react-dialog
2

Import and compose

Import the component parts and compose them together following the component’s anatomy.
import * as Dialog from '@radix-ui/react-dialog';

export default function MyDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>Open Dialog</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="dialog-overlay" />
        <Dialog.Content className="dialog-content">
          <Dialog.Title>Edit Profile</Dialog.Title>
          <Dialog.Description>
            Make changes to your profile here.
          </Dialog.Description>
          {/* Your form or content */}
          <Dialog.Close asChild>
            <button>Save changes</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
3

Style with any method

Components are unstyled by default. Style them with CSS, CSS-in-JS, or any styling solution.
.dialog-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  inset: 0;
  animation: fadeIn 200ms;
}

.dialog-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
  max-width: 450px;
  animation: slideUp 200ms;
}
All Radix components support refs, event handlers, and custom props for maximum styling flexibility.

Explore Components

Browse our collection of accessible, composable components

Dialog

Modal dialogs with focus management and accessibility

Dropdown Menu

Menus with keyboard navigation and nested support

Select

Custom select controls with typeahead and grouping

Tooltip

Accessible tooltips with customizable positioning

Accordion

Collapsible sections with keyboard control

Tabs

Tabbed interfaces with roving focus

Why Radix UI?

The foundation for your design system

♿

Accessible

WAI-ARIA compliant components tested with screen readers and keyboard navigation

🎨

Unstyled

No default styles to override—bring your own design system

🧩

Composable

Granular component APIs with 1-to-1 DOM mapping for maximum flexibility

⚡

Developer Experience

TypeScript support, controlled/uncontrolled components, SSR compatible

Learn More

Deep dive into concepts and guides

Philosophy

Understand the principles behind Radix UI Primitives

Styling

Learn about styling approaches and techniques

Accessibility

Explore accessibility features and best practices

TypeScript

Get the most out of TypeScript type safety

Ready to get started?

Install your first component and start building accessible, composable interfaces today.

View Installation Guide