Radix Primitives

What it is

Radix Primitives is an open source UI component library for React. Its documentation describes it as low level, with a focus on accessibility, customisation and developer experience. Components ship unstyled, so you can use them as the base layer of your own design system or adopt them one at a time. It is MIT licensed, and its GitHub repository had about 19.3k stars as of 2026-09.

Why it matters

The hardest parts of components such as dialogs, dropdown menus, tabs, popovers and tooltips are not their looks but their behaviour: moving focus into a dialog and back, closing on Escape, arrow key navigation in menus, correct ARIA roles and states. The Radix documentation says it handles these details, including aria and role attributes, focus management and keyboard navigation. That lets you concentrate on design and tokens.

Headless versus styled

A headless (unstyled) library gives you behaviour without appearance. Compared with a fully styled library, you do more styling work but get complete control over how components look, which is what a custom design system needs. Copy-in libraries such as shadcn/ui build on primitives like these and add default styles.

Time needed

An afternoon to build your first styled dialog or menu. Building a full set of design system components on top takes weeks, like any component library.

Prerequisites

React, CSS (or a styling approach such as Tailwind) and a basic understanding of accessibility. Test with a keyboard and screen reader as you style.

Is it worth it?

If you are building your own design system in React, yes. Writing accessible menus and dialogs from scratch is error-prone. If you only need a few simple components, plain semantic HTML may be enough.

Common mistakes

• Removing focus outlines while styling, which undoes the accessibility work.
• Wrapping primitives in many layers of abstraction before you know what your system needs.

What you can do after

Build accessible, fully custom-styled components that match your Figma designs and behave correctly with a keyboard and assistive technology.

Common questions

Is Radix only for React? The primitives are React components. Check the docs for current support.

Who maintains it? The project is maintained under WorkOS; check the site for current details.