Radix UI

Overview

Radix UI is an open-source component library designed for building accessible and customizable user interfaces with React. Founded in 2020, it provides a set of unstyled, low-level UI primitives that serve as a foundation for developers to create bespoke design systems. Unlike opinionated component libraries that ship with predefined visual styles, Radix UI focuses on the functional and accessibility aspects of UI components, allowing developers complete control over styling.

The core offering, Radix Primitives, includes components such as dialogs, dropdown menus, sliders, and tooltips. Each primitive is engineered to adhere to WAI-ARIA authoring practices, ensuring that the resulting UIs are accessible by default. This approach aims to reduce the burden of implementing accessibility features manually, which can be complex and error-prone. For example, Radix UI components manage focus trapping, keyboard navigation, and appropriate ARIA attributes without requiring developers to write this logic from scratch, aligning with best practices for web accessibility as outlined by organizations like the W3C Web Accessibility Initiative.

Radix UI is particularly well-suited for developers and teams who require a high degree of customization and control over their UI's appearance. It allows for integration with various styling solutions, including CSS-in-JS libraries like Emotion or Styled Components, utility-first frameworks like Tailwind CSS, or traditional CSS modules. This flexibility makes it a foundational tool for design systems that need to maintain a unique brand identity while ensuring robust functionality and accessibility. The library's headless nature means it provides the logic and accessibility features, but not the visual presentation, empowering developers to apply any visual design.

Developers using Radix UI benefit from a strong emphasis on developer experience. The API is designed to be intuitive, with clear documentation and examples. The project also offers Radix Colors, a collection of perceptually uniform color scales, and Radix Icons, a set of SVG icons, to complement the primitives and aid in the design system building process. Radix UI is primarily used within the React ecosystem, offering TypeScript support for enhanced type safety and developer tooling.

While Radix UI provides the building blocks, developers are responsible for the visual styling. This contrasts with libraries like MUI or Chakra UI, which provide pre-styled components out of the box. Radix UI shines in scenarios where a completely custom look and feel are paramount, or where an existing design system needs to be rebuilt with a focus on accessibility from the ground up. Its unopinionated nature makes it a versatile choice for a wide range of web applications, from marketing sites to complex enterprise dashboards.

Key features

• Headless UI Primitives: Provides unstyled, low-level components (e.g., Dialog, Dropdown Menu, Slider) that handle state, interactions, and accessibility without imposing visual styles.
• Built-in Accessibility: Components are designed to be WAI-ARIA compliant, including proper keyboard navigation, focus management, and semantic HTML attributes, reducing the effort for developers to meet accessibility standards.
• Full Styling Flexibility: Compatible with any styling methodology, including CSS-in-JS, utility-first CSS (like Tailwind CSS), CSS Modules, or traditional stylesheets, allowing complete control over visual design.
• Developer Experience Focused API: Offers a clear and intuitive API for component usage, with comprehensive documentation and TypeScript support for improved type safety and autocompletion.
• Radix Colors: A supplementary open-source color system providing perceptually uniform color scales for consistent and accessible design system palettes.
• Radix Icons: A collection of SVG icons designed to be used alongside Radix Primitives, offering a consistent visual language.
• Composable Components: Primitives are designed to be composable, allowing developers to combine them to create more complex UI patterns while retaining accessibility and functionality.

Pricing

Radix UI is a fully open-source project.

Pricing as of April 2026. For the most current information, refer to the Radix UI homepage.

Common integrations

• React: Radix UI is built specifically for React applications, providing components as React hooks and components. Radix UI Getting Started documentation
• Tailwind CSS: Frequently combined with Tailwind CSS for rapid utility-first styling of the unstyled Radix primitives. Radix UI Styling with Tailwind CSS
• CSS-in-JS Libraries (e.g., Stitches, Emotion, Styled Components): Radix UI components can be styled using various CSS-in-JS solutions, with Stitches being developed by the same team.
• Next.js: Commonly used in Next.js projects to build server-rendered or statically generated React applications with accessible UI components. Next.js Documentation
• Vite: Integrates with Vite for fast development builds and optimized production bundles of React applications utilizing Radix UI. Vite Guide

Alternatives

• Chakra UI: A component library for React that provides accessible, composable, and customizable components with a focus on ease of use and pre-defined styles.
• Headless UI: A set of completely unstyled, fully accessible UI components for React and Vue, developed by the Tailwind CSS team.
• React Aria: A library of React hooks that provides accessible UI primitives, focusing on interactions and accessibility rather than visual components.
• MUI: A popular React UI library implementing Google's Material Design, offering a comprehensive set of pre-styled components.
• Radix UI Comparison with other libraries

Getting started

To get started with Radix UI, install the desired primitive packages. Here's an example using the @radix-ui/react-dialog primitive to create a basic modal dialog in a React application:

import React from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import './styles.css'; // Assume a CSS file for styling

const MyDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger asChild>
      <button className="Button green">Edit profile</button>
    </Dialog.Trigger>
    <Dialog.Portal>
      <Dialog.Overlay className="DialogOverlay" />
      <Dialog.Content className="DialogContent">
        <Dialog.Title className="DialogTitle">Edit profile</Dialog.Title>
        <Dialog.Description className="DialogDescription">
          Make changes to your profile here. Click save when you're done.
        </Dialog.Description>
        <fieldset className="Fieldset">
          <label className="Label" htmlFor="name">
            Name
          </label>
          <input className="Input" id="name" defaultValue="Pedro Duarte" />
        </fieldset>
        <fieldset className="Fieldset">
          <label className="Label" htmlFor="username">
            Username
          </label>
          <input className="Input" id="username" defaultValue="@pedrodcl" />
        </fieldset>
        <div style={{ display: 'flex', marginTop: 25, justifyContent: 'flex-end' }}>
          <Dialog.Close asChild>
            <button className="Button green">Save changes</button>
          </Dialog.Close>
        </div>
        <Dialog.Close asChild>
          <button className="IconButton" aria-label="Close">
            X
          </button>
        </Dialog.Close>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
);

export default MyDialog;

And a corresponding styles.css for basic visual presentation:

/* styles.css */
.DialogOverlay {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  inset: 0;
  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.DialogContent {
  background-color: white;
  border-radius: 6px;
  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 450px;
  max-height: 85vh;
  padding: 25px;
  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.DialogTitle {
  margin: 0;
  font-weight: 500;
  color: var(--mauve12);
  font-size: 17px;
}

.DialogDescription {
  margin: 10px 0 20px;
  color: var(--mauve11);
  font-size: 15px;
  line-height: 1.5;
}

.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  height: 35px;
}

.Button.green {
  background-color: var(--green5);
  color: var(--green11);
}

.IconButton {
  font-family: inherit;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--violet11);
  position: absolute;
  top: 10px;
  right: 10px;
}

.Fieldset {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 15px;
}

.Label {
  font-size: 15px;
  color: var(--violet11);
  width: 70px;
  text-align: right;
}

.Input {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 15px;
  line-height: 1;
  color: var(--violet11);
  box-shadow: 0 0 0 1px var(--violet7);
  height: 35px;
}

@keyframes overlayShow {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes contentShow {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

This example demonstrates how Radix UI provides the structure and behavior for a dialog, while the visual styling is applied through a separate CSS file. The Dialog.Root, Dialog.Trigger, Dialog.Portal, Dialog.Overlay, Dialog.Content, Dialog.Title, Dialog.Description, and Dialog.Close components are all part of the Radix UI primitive, ensuring accessibility features like focus management and ARIA attributes are correctly handled.