Skip to main content

​
What is Radix UI Primitives?

Radix UI Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

​
Key Features

Accessible

Components adhere to WAI-ARIA design patterns and are tested with assistive technologies.

Unstyled

No opinionated styles - bring your own styling solution or use inline styles, CSS, CSS-in-JS, or Tailwind.

Composable

Components are designed with a composable API, mapping 1-to-1 with DOM elements for maximum flexibility.

Developer Experience

Built with TypeScript, with intuitive APIs and comprehensive documentation.

​
Philosophy

Most of us share similar definitions for common UI patterns like accordion, checkbox, dialog, dropdown, select, slider, and tooltip. These UI patterns are documented by WAI-ARIA and generally understood by the community. However, the implementations provided to us by the web platform are inadequate. They’re either non-existent, lacking in functionality, or cannot be customised sufficiently. As a result, developers are forced to build custom components—an incredibly difficult task. Most components on the web end up being inaccessible, non-performant, and lacking important features. Our goal is to create a well-funded open-source component library that the community can use to build accessible design systems.

​
Core Principles

Radix UI Primitives are built with these guiding principles:

​
1. Accessible

  • Components adhere to WAI-ARIA guidelines and are tested regularly in modern browsers and assistive technologies
  • Keyboard navigation, focus management, and screen reader support are built-in
  • ARIA attributes are properly implemented and managed automatically

​
2. Functional

  • Feature-rich components with support for keyboard interaction, collision detection, focus trapping, dynamic resizing, scroll locking, and more
  • Edge cases and complex interactions are handled for you

​
3. Composable

  • Components provide direct access to underlying DOM nodes
  • 1-to-1 mapping between components and DOM elements (one component renders one DOM element)
  • Full control over DOM event handlers and refs

​
4. Customizable

  • Zero presentational styles applied by default
  • Compatible with any styling solution: CSS, CSS-in-JS, Tailwind, or utility-first frameworks
  • Full control over markup and styling

​
5. Interoperable

  • Works with your existing React setup
  • Supports controlled and uncontrolled modes
  • Integrates with form libraries and state management solutions

​
Who is this for?

Radix Primitives provide the perfect foundation for your design system. Start with accessible, unstyled components and apply your brand’s design language.
Instead of spending weeks building and testing accessible components, start with battle-tested primitives that handle accessibility for you.
If you’re tired of fighting opinionated component libraries and overriding styles, Radix gives you complete control with no default styles to override.
Components handle complex patterns like keyboard navigation, focus management, collision detection, and portal rendering out of the box.

​
What’s included?

1

30+ Components

A comprehensive set of UI primitives covering overlays, navigation, forms, layout, and data display.
2

Utility Hooks

Reusable hooks for common patterns like controllable state, callback refs, and escape key handling.
3

TypeScript Support

Full TypeScript definitions with excellent IDE autocomplete and type safety.
4

Framework Agnostic Styling

Works with any styling solution - CSS Modules, styled-components, Emotion, Tailwind, or plain CSS.

​
Browser Support

Radix UI Primitives are tested and supported in all modern browsers:
  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
Components are built for modern browsers and do not include polyfills. For older browser support, you’ll need to provide your own polyfills.

​
Open Source

Radix UI is open source and MIT licensed. You can find the source code on GitHub. Contributions are welcome! Read our contributing guidelines to get started.

​
Community

Join the Radix UI community to get help, share feedback, and connect with other developers:
  • Discord - Chat with the community
  • Twitter - Follow for updates
  • GitHub - Report issues and contribute

​
Next Steps

Installation

Install Radix UI Primitives and set up your first component

Styling

Learn how to style components with your preferred approach

Composition

Understand the composable API design pattern

Accessibility

Explore accessibility features and best practices