Skip to content
Get packs

Guide · Open source

How to use Radix Primitives: install, build and style components

Updated · written with AI from the project's own documentation and checked against our catalogue data

Radix Primitives is an open-source UI component library of low-level building blocks, such as menus and dialogs, focused on accessibility, customization and developer experience. This guide explains how to get the repository running with Node.js and pnpm, how the library is meant to be used, and when it is a good fit. By the end you will know the setup steps and where to find the full documentation.

Radix Primitivesradix-ui/primitives · ★ 19.5k · MIT

Quick start

  1. 1Check Node.js is installed. Confirm Node.js is available on your machine, since it is a listed prerequisite.
  2. 2Install pnpm. Run npm install -g pnpm in your terminal to install pnpm globally.
  3. 3Clone the repository. Get a local copy of the radix-ui/primitives source code.
  4. 4Install dependencies. From the repository root, run pnpm install.
  5. 5Read the documentation. Open radix-ui.com/primitives/docs to learn how each component is meant to be used.
  6. 6Adopt components incrementally. Start with one primitive in an existing app or build your design system on top of the base layer.

What Radix Primitives is and who it is for

Radix Primitives is a low-level user interface component library. The README describes it as a base layer for design systems and web apps, and says you can use the components either as that base layer or adopt them incrementally.

It suits developers building a custom design system who want accessible base components, teams adding interactive widgets to an existing web app one piece at a time, and React developers who want to control styling themselves.

  • Good fit: custom design systems and accessible base components
  • Good fit: adding interactive widgets to an existing web app incrementally
  • Not a fit: ready-made, styled components out of the box
  • Not a fit: non-developers looking for a finished website or app builder

Install the prerequisites: Node.js and pnpm

The project's install method is clone-and-build, and the listed prerequisites are Node.js and pnpm. The README says to install pnpm first if you do not already have it, using your terminal.

  • Prerequisites: Node.js and pnpm
npm install -g pnpm

Install the dependencies and set up the repository

After pnpm is available, install the project's dependencies from the root of the repository. The README gives this as the only setup command after pnpm.

pnpm install

Find the documentation and release notes

The README points to full documentation on the Radix site, where you will find component guides. Release notes and the changelog are published separately, so check them when you upgrade.

If you want to contribute, the README links to the contributing guidelines in the repository's .github folder.

  • Documentation: radix-ui.com/primitives/docs
  • Changelog: radix-ui.com/primitives/docs/overview/releases
  • Contributing guidelines: .github/CONTRIBUTING.md

Get help from the community

The README lists a Discord server for questions and tips, and a Twitter account for announcements and blog posts.

  • Discord: ask questions and share tips
  • Twitter: updates, announcements and general Radix tips

What people use it for

  • Building a custom design system on accessible base components
  • Adding an accessible menu or dialog to an existing React web app
  • Creating widgets whose styling you control fully

Frequently asked questions

Is Radix Primitives free to use?

Yes. The README states it is licensed under the MIT License, copyright WorkOS. You can read the license file in the repository for the full terms.

What are the requirements for Radix Primitives?

The listed prerequisites are Node.js and pnpm. Install pnpm with npm install -g pnpm, then run pnpm install in the repository.

Does Radix Primitives come with styled components?

No. The README describes these as low-level primitives, so you bring your own styling. If you want ready-made styled components, this library is not the right choice.

What are the alternatives to Radix Primitives?

The comparable projects listed are Headless UI, React Aria, Ariakit and Base UI. Each offers accessible base components, so compare their APIs and docs against your needs.

How do I install Radix Primitives in my app?

The source describes a clone-and-build method rather than a package install step. Clone the repository, install pnpm, and run pnpm install. The README does not give an npm package install command, so check the documentation for component usage.

Where can I get help if something breaks?

Ask in the Radix Discord community, or check the documentation and changelog. The README links to both, and to the contributing guidelines if you want to report or fix issues.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Radix Primitives is a strong choice for React developers building a custom design system who want accessible, unstyled base components they can adopt piece by piece. If you want finished, styled components or a no-code site builder, pick a styled component kit or a different tool instead.

Install options & downloads