radix-ui-design-system

Radix UI Design System

Build production-ready, accessible design systems using Radix UI primitives with full customization control and zero style opinions.

Detailed Guide

Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

When to Use This Skill

• Creating a custom design system from scratch
• Building accessible UI component libraries
• Implementing complex interactive components (Dialog, Dropdown, Tabs, etc.)
• Migrating from styled component libraries to unstyled primitives
• Setting up theming systems with CSS variables or Tailwind
• Need full control over component behavior and styling
• Building applications requiring WCAG 2.1 AA/AAA compliance

Do not use this skill when

• You need pre-styled components out of the box (use shadcn/ui, Mantine, etc.)
• Building simple static pages without interactivity
• The project doesn't use React 16.8+ (Radix requires hooks)
• You need components for frameworks other than React

---

Real-World Examples

Example 1: Command Palette (Combo Dialog)

import * as Dialog from '@radix-ui/react-dialog';
import { Command } from 'cmdk';

export function Comma