primitives

Radix Primitives is a low-level, open-source UI component library, written in TypeScript, for building accessible design systems and web apps. Rather than shipping pre-styled components, it gives you unstyled building blocks that you style yourself, which makes it a fit either as the base layer of a custom design system or for dropping into an existing app incrementally. It's aimed at teams and developers who want accessibility and interaction behavior handled for them while keeping full control over the visual layer.

The project positions itself explicitly around three priorities: accessibility, customization, and developer experience. That framing matters when deciding whether to reach for it. It's not trying to be the fastest way to ship a generic-looking interface. It's trying to be a dependable foundation you build your own look on top of, so the tradeoff is more upfront styling work in exchange for not having to solve accessibility and interaction details yourself.

Key features

• Accessibility-first primitives: built with accessibility as a core focus rather than an afterthought, according to the project's own description.
• Customization over prescription: components are low-level, so visual styling is left entirely up to you rather than bundled in.
• Incremental adoption: usable as the foundation of a full design system, or added to specific parts of an existing app without a full rewrite.
• TypeScript codebase: the library itself is written in TypeScript.
• MIT licensed: permissively licensed, with copyright held by WorkOS since 2022.
• Visual regression testing in development: the project uses Chromatic as its visual testing platform to review UI changes and catch visual regressions before they ship.
• Community channels: a Discord server and Twitter account are maintained for community questions, tips, and announcements.

Ideal use cases

Radix Primitives fits teams building a custom design system who want accessible interaction behavior, such as focus management and keyboard navigation, handled for them, while keeping full control over visual design. It also suits teams that want to add accessible, unstyled building blocks to an existing app one piece at a time rather than adopting a full component library upfront.

It's a weaker fit if you want a component library with built-in visual styling out of the box. Since Radix Primitives is explicitly described as low-level and customization-focused, you should expect to write your own CSS or use a styling system on top of it rather than getting a finished look for free. Teams on a tight timeline who need ready-made, pre-styled components may be better served by a higher-level component library instead.

It's also worth weighing against building everything from scratch. Accessible interaction patterns (focus trapping, keyboard handling, correct ARIA usage) are easy to get subtly wrong, and Radix Primitives exists specifically to take that work off your plate while leaving styling decisions to you. That middle position, between a fully custom build and a fully styled component kit, is the core tradeoff the project is designed around.

Installation

The installation steps in the README are for setting up the Radix Primitives repository itself for local development and contribution, not for consuming the library as a package in your own project (the README doesn't include per-package install commands for that). To work on the repository itself:

Install pnpm globally:

npm install -g pnpm

Then install the project's dependencies:

pnpm install

For actual project documentation, including how individual primitives are meant to be used in an app, see the docs at https://www.radix-ui.com/primitives/docs. Changelog entries are tracked at https://www.radix-ui.com/primitives/docs/overview/releases, and contribution guidelines live in the repository's .github/CONTRIBUTING.md file if you want to submit changes back upstream.

If you hit questions along the way, the community Discord server is the place mentioned in the README for getting involved, asking questions, and sharing tips, while the project's Twitter account is used for updates, announcements, and blog posts.