primitives
Radix Primitives is a low-level, unstyled React component library that provides accessible, customizable building blocks (dialogs, dropdowns, tooltips, etc.) for constructing design systems and web apps. It handles the hard parts—accessibility, keyboard interaction, focus management—while leaving styling entirely up to you.
Embed badge
[](https://opensources.dev/resource/primitives)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
4/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNot yet scanned
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
npm install primitivesOur analysis
A set of unstyled, fully accessible React primitives (components like Dialog, Popover, Dropdown Menu, Tabs, Slider) that ship behavior and accessibility but no visual styling. It's the foundation that powers many modern design systems.
When to use primitives
Use it when you're building a custom design system and want to own all styling while delegating complex accessibility and interaction logic (focus traps, ARIA roles, keyboard nav) to a battle-tested library. Ideal pairing with Tailwind CSS or CSS-in-JS, and the basis for shadcn/ui.
When not to
Skip it if you want a styled, batteries-included component kit out of the box (use MUI, Chakra, or Mantine), or if you're not on React. It also adds per-component install and composition overhead that's overkill for simple projects.
Strengths
- Excellent, audited accessibility and keyboard support out of the box
- Completely unstyled, giving full visual control
- Composable compound-component API via asChild and Slot
- Each primitive is independently installable to minimize bundle bloat
- Strong TypeScript support and large, active community
Trade-offs
- React-only, no framework-agnostic version
- Verbose compound-component markup compared to styled kits
- You must build all styling yourself, which takes time
- Some primitives lag on certain edge-case features versus React Aria
- Maintenance pace varies across individual primitives
Maturity
Very mature and widely adopted (~19k stars), backed by WorkOS, MIT licensed, and the de facto foundation for shadcn/ui and countless production design systems. Visual regression testing via Chromatic and a stable, well-documented release cadence.
Radix Primitives
An open-source UI component library for building high-quality, accessible design systems and web apps.
Radix 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.
Installation
First, install pnpm if you haven't already. Open your terminal and run:
npm install -g pnpm
Then, install the dependencies:
pnpm install
Documentation
For full documentation, visit radix-ui.com/primitives/docs.
Releases
For changelog, visit radix-ui.com/primitives/docs/overview/releases.
Contributing
Please follow our contributing guidelines.
Community
Discord - To get involved with the Radix community, ask questions and share tips.
Twitter - To receive updates, announcements, blog posts, and general Radix tips.
Thanks
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.
License
Licensed under the MIT License, Copyright © 2022-present WorkOS.