Radix Themes

Radix Themes is the finished, styled layer on top of Radix primitives. It answers the question every headless library leaves open: what if you want the accessibility but do not want to design anything.

At a glance

Install	npm install @radix-ui/themes
Primitives	Radix, already wired up
Styling	plain CSS with custom properties, no Tailwind
Colour system	full accessible scales from Radix Colors
MCP server	not published
License	MIT

Install

import "@radix-ui/themes/styles.css"
import { Theme, Button, Card } from "@radix-ui/themes"

<Theme accentColor="teal" grayColor="slate" radius="medium" scaling="100%">
  <Card>
    <Button>Save changes</Button>
  </Card>
</Theme>

The colour system is the underrated part

Radix Colors provides twelve-step scales designed so that each step has a defined role: step 9 is the solid background, step 11 is accessible text, and so on. Pick an accent and contrast ratios hold automatically in both light and dark mode. Most teams get this wrong by hand.

No Tailwind, and that is the point

Themes is configured through props and CSS custom properties rather than utility classes. If your team does not want Tailwind in the markup, this is one of very few modern React options that gives you a complete, coherent look without it.

Choose it if

• You want Radix behaviour and a good default appearance in one install.
• You want a coherent colour system without building one.
• You are avoiding Tailwind deliberately.

Look elsewhere if

• You need deep visual customisation. This is opinionated by design.
• You want to own the component source. shadcn/ui does that instead.