Radix UI Themes

Radix Themes is an open-source component library maintained by WorkOS, built on top of Radix Primitives. Rather than shipping unstyled building blocks, it wraps those primitives in a full visual design system: a Theme provider that governs accent color, gray color, radius, scaling, and light/dark appearance across an entire app, plus roughly 30 pre-styled components (Button, Dialog, DropdownMenu, DataList, Callout, Card, CheckboxGroup, ContextMenu, and more) that all read from the same shared tokens.

Every component prop is driven by a declarative propDef system shared across the library, which lets any layout or sizing prop (size, gap, radius, color) accept either a single value or a responsive object keyed by breakpoint, automatically generating the matching CSS classes and inline styles. The result is a component set that looks and behaves consistently out of the box while still exposing the composability of Radix Primitives underneath.

What You Get

• A Theme provider component that centrally controls accent color, gray color, radius, scaling, and appearance (light/dark) for every nested component
• Around 30 pre-styled, accessible components (Button, Dialog, AlertDialog, DropdownMenu, ContextMenu, DataList, Callout, Card, CheckboxGroup, Avatar, Badge, Blockquote, Code, and more)
• A shared propDef/extractProps system that turns declarative size, color, and spacing props into responsive CSS classes and inline styles automatically
• Design tokens built on @radix-ui/colors for consistent, accessible color scales across the whole theme
• A ThemePanel dev component for live-previewing and tweaking theme settings (accent color, radius, scaling) in the browser
• Compiled CSS delivered as a single stylesheet plus per-component CSS files, with a PostCSS pipeline for custom breakpoints and whitespace handling

Common Use Cases

• Bootstrapping a new product’s UI with a consistent, accessible component set instead of building a design system from primitives
• Adding dark/light theme support and a configurable accent/gray color scheme to an existing React app
• Building internal tools and admin dashboards quickly using DataList, Card, and Dialog components with sane defaults
• Prototyping design system decisions live via ThemePanel before committing to a fixed theme configuration

Under The Hood

Architecture The library is organized as a pnpm/turborepo monorepo with the publishable package at packages/radix-ui-themes and a Next.js playground app under apps/playground used for manual QA and Playwright visual-regression testing. The core Theme component (src/components/theme.tsx) establishes a React context (ThemeContext) that every other component reads from via useThemeContext; a root Theme wraps children in Radix’s Tooltip.Provider and Direction.Provider, while nested Theme instances only override context values for their subtree. Individual components (e.g. button.tsx) are thin wrappers around internal _internal/base-* implementations, and every component’s style-relevant props are declared once as a propDef object (*.props.tsx) and resolved through the shared extractProps/getResponsiveStyles helpers, so adding a new sizing or color prop to a component is a declarative change rather than a manual CSS/class-name change.

Tech Stack Built with TypeScript in strict mode, React (peer-dependency range spanning 16.8 through 19), and radix-ui/@radix-ui/colors as the underlying primitives and color-token source. The package builds CJS and ESM output via esbuild plus separate tsc passes for declaration files, and compiles its CSS with PostCSS (custom breakpoints and whitespace plugins authored in-repo) rather than a CSS-in-JS runtime. classnames is used for conditional class composition, and react-remove-scroll-bar handles scroll-locking for overlay components like Dialog.

Code Quality There are no unit/integration test files in the published package; correctness is instead enforced through TypeScript strict mode, ESLint (with jsx-a11y, react, and react-hooks plugins), Stylelint for the CSS, and a Playwright-driven visual-regression test suite (test:vr) run against the playground app in CI. GitHub Actions runs build, lint, format-check, and visual-regression jobs on every push and pull request, so component styling regressions are caught pixel-by-pixel rather than via behavioral unit tests.

What Makes It Unique Most component libraries either ship unstyled primitives (leaving theming entirely to the consumer) or ship a fixed visual style with limited runtime configurability. Radix Themes’ propDef/extractProps system lets every component accept the same small set of responsive, theme-aware props (size, color, radius, gap) and resolves them into the correct classes and inline styles at render time, giving one consistent theming API across dozens of components while still being built directly on Radix’s accessible, unstyled primitives underneath.