Radix UI

UI/UX

UI/UXFreeLevel: Advanced

Radix UI

4.0/52dm rating

A strong accessibility foundation; you have to do the visual design yourself.

Unstyled React components with keyboard and accessibility handling built in; shadcn/ui is built on top of it.

Official site How to use it

Overview

Radix UI is an open-source ecosystem for React interfaces made up of four parts: Primitives, Themes, Icons and Colors. Primitives are foundational building blocks such as popover, dialog and dropdown that handle behavior and accessibility, leaving the visual styling for you to add with CSS.

The primitives follow the WAI-ARIA standard, manage focus on their own, support both controlled and uncontrolled usage, and let you fine-tune placement, screen-edge collision handling and how they close.

Radix Themes is a ready-styled component library aimed at fast development and easy maintenance. Many popular UI kits are built on Radix, so understanding Radix helps developers master component behavior.

Highlights

Focus on accessibility

Primitives follow WAI-ARIA patterns, supporting keyboard and screen reader users.

Free to style

Primitives handle behavior; you add classes and CSS to match your own design.

Focus and layering management

Handles focus, layering and popup dismissal behavior automatically.

Controlled or uncontrolled

Use it simply by default or control state entirely through code.

A single package

Install the radix-ui package and import each primitive via sub-paths.

Radix Themes

A ready-styled component set for teams that want to move fast.

What it's for

Popups and menus in a web app

Build dropdowns, popovers and dialogs that behave correctly without writing complex logic yourself.

Building your own design system

Use primitives as the behavior core and apply the business's brand styling on top.

Products needing good accessibility

Applications for diverse customers must be usable with a keyboard and a screen reader.

Quick prototypes

Use Radix Themes to get a complete interface when there is no designer yet.

How to use it

1
Install the Radix package
Install the latest radix-ui package in your React project.
$npm install radix-ui@latest
2
Import a primitive
Import the primitive you need, for example Popover; you can import via sub-paths so the bundler removes unused parts better.
3
Assemble the parts
Put together parts such as Root, Trigger, Portal, Content and Arrow into a complete component.
4
Add styling
Attach className and write CSS or Tailwind classes to create the interface from your design.

Video guides

Radix UI Tutorial: Create Customizable UI Components
Monsterlessons Academy

Base UI vs Radix - I Tested Both (Here’s What You Should Use)
OrcDev

Real-world example

Illustrative scenario

A sales software startup in Can Tho has its own designer and wants an interface with a distinct brand identity, unlike ready-made templates. The dev team uses Radix Primitives for the branch-selection popover, the order-confirmation dialog and the account menu, then writes CSS to match the design file. Radix already handles focus, the Esc key and popup positioning, so the team focuses only on the interface and business logic.

Tips & notes

Pick the right product
Use Primitives if you need to design it yourself; consider Radix Themes if you want a ready-made look quickly.
Import via sub-paths
Helps some bundlers tree-shake more effectively.
Keep the accessibility attributes
When restyling, avoid removing the attributes Radix attaches for screen readers.