# Radix Themes — Polished React Components on Radix Primitives

> An open-source component library from the Radix team that pairs accessible Radix UI primitives with a ready-to-use design system, maintained by WorkOS.

## Install

Save as a script file and run:

# Radix Themes — Polished React Components on Radix Primitives

## Quick Use
```bash
npm install @radix-ui/themes
# Wrap your app:
# import '@radix-ui/themes/styles.css';
# import { Theme, Button } from '@radix-ui/themes';
```

## Introduction
Radix Themes provides a styled component layer on top of the headless Radix UI primitives. It gives you a cohesive visual design system with built-in color scales, spacing tokens, and typography presets while keeping the accessibility guarantees Radix is known for.

## What Radix Themes Does
- Supplies 30+ styled React components (Button, Dialog, Select, Table, etc.)
- Includes a token-based design system with color, radius, and scaling options
- Automatically handles light and dark mode through the Theme provider
- Provides layout primitives (Box, Flex, Grid, Section) for consistent spacing
- Maintains WAI-ARIA compliance inherited from Radix UI primitives

## Architecture Overview
Radix Themes wraps Radix UI primitives with a CSS layer powered by custom properties. The `<Theme>` provider component sets global tokens for color, radius, and scaling that cascade to all child components. Colors use Radix Colors, a perceptually consistent palette system with automatic dark mode variants. Components are tree-shakeable and support polymorphic rendering via the `asChild` prop.

## Self-Hosting & Configuration
- Install from npm and import the base CSS file
- Wrap your application root with the `<Theme>` component
- Set appearance (light/dark/inherit), accent color, gray scale, radius, and scaling via Theme props
- Override specific tokens with CSS custom properties for deeper customization
- Compatible with Next.js, Vite, Remix, and other React frameworks

## Key Features
- Perceptually balanced color system with 30 color scales and automatic dark mode
- Consistent spacing and typography through design tokens
- Polymorphic components via `asChild` for flexible DOM structure
- SSR-safe with no layout shift on theme hydration
- Maintained by WorkOS with regular releases

## Comparison with Similar Tools
- **Radix UI Primitives** — headless and unstyled; Radix Themes adds the visual layer
- **shadcn/ui** — copy-paste components using Radix primitives; Radix Themes is an installable package
- **MUI** — larger component set with Material Design; Radix Themes has a more neutral aesthetic
- **Mantine** — feature-rich with hooks; Radix Themes focuses on a tighter, token-driven API
- **Chakra UI** — style-props model; Radix Themes uses CSS variables and class-based styling

## FAQ
**Q: Can I use Radix Themes alongside existing Radix UI primitives?**
A: Yes. Radix Themes components and headless primitives can coexist in the same project.

**Q: Does Radix Themes support Tailwind CSS?**
A: It uses its own CSS variable system. You can use Tailwind alongside it, but theming is handled through the Theme provider rather than Tailwind utilities.

**Q: How do I switch between light and dark mode?**
A: Set the `appearance` prop on the Theme component to "light", "dark", or "inherit" to follow the system preference.

**Q: Is Radix Themes free?**
A: Yes. It is MIT licensed and open source.

## Sources
- https://github.com/radix-ui/themes
- https://radix-ui.com/themes

---
Source: https://tokrepo.com/en/workflows/asset-ed6eca88
Author: Script Depot