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?
Building a design system
Building a design system
Radix Primitives provide the perfect foundation for your design system. Start with accessible, unstyled components and apply your brand’s design language.
Need accessible components quickly
Need accessible components quickly
Instead of spending weeks building and testing accessible components, start with battle-tested primitives that handle accessibility for you.
Want full styling control
Want full styling control
If you’re tired of fighting opinionated component libraries and overriding styles, Radix gives you complete control with no default styles to override.
Building complex interactions
Building complex interactions
Components handle complex patterns like keyboard navigation, focus management, collision detection, and portal rendering out of the box.
What’s included?
30+ Components
A comprehensive set of UI primitives covering overlays, navigation, forms, layout, and data display.
Utility Hooks
Reusable hooks for common patterns like controllable state, callback refs, and escape key handling.
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