Radix UI Design System

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

Overview

Radix UI provides unstyled, accessible components (primitives) that you can customize to match any design system. This skill guides you through building scalable component libraries with Radix UI, focusing on accessibility-first design, theming architecture, and composable patterns.

Key Strengths:

• Headless by design: Full styling control without fighting defaults
• Accessibility built-in: WAI-ARIA compliant, keyboard navigation, screen reader support
• Composable primitives: Build complex components from simple building blocks
• Framework agnostic: Works with React, but styles work anywhere

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

---

Core Principles

1. Accessibility First

Every Radix primitive is built with accessibility as the foundation:

• Keyboard Navigation: Full keyboard support (Tab, Arrow keys, Enter, Escape)
• Screen Readers: Proper ARIA attributes and live regions
• Focus Management: Automatic focus trapping and restoration
• Disabled States: Proper handling of disabled and aria-disabled

Rule: Never override accessibility features. Enhance, don't replace.

2. Headless Architecture

Radix provides behavior, you provide appearance:

// ❌ Don't fight pre-styled components


// ✅ Radix gives you behavior, you add styling

  
  

3. Composition Over Configuration

Build complex components from simple primitives:

// Primitive components compose naturally

  
    Tab 1
    Tab 2
  
  Content 1
  Content 2

---

Getting Started

Installation

# Install individual primitives (recommended)
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu

# Or install multiple at once
npm install @radix-ui/react-{dialog,dropdown-menu,tabs,tooltip}

# For styling (optional but common)
npm install clsx tailwind-merge class-variance-authority

Basic Component Pattern

Every Radix component follows this pattern:

import * as Dialog from '@radix-ui/react-dialog';

export function MyDialog() {
  return (
    
      {/* Trigger the dialog */}
      
        Open
      

      {/* Portal renders outside DOM hierarchy */}
      
        {/* Overlay (backdrop) */}
        
        
        {/* Content (modal) */}
        
          Title
          Description
          
          {/* Your content here */}
          
          
            Close
          
        
      
    
  );
}

---

Theming Strategies

Strategy 1: CSS Variables (Framework-Agnostic)

Best for: Maximum portability, SSR-friendly

/* globals.css */
:root {
  --color-primary: 220 90% 56%;
  --color-surface: 0 0% 100%;
  --radius-base: 0.5rem;
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

[data-theme="dark"] {
  --color-primary: 220 90% 66%;
  --color-surface: 222 47% 11%;
}

// Component.tsx

Strategy 2: Tailwind + CVA (Class Variance Authority)

Best for: Tailwind projects, variant-heavy components

// button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const buttonVariants = cva(
  // Base styles
  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent",
        ghost: "hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

interface ButtonProps extends VariantProps {
  children: React.ReactNode;
}

export function Button({ variant, size, children }: ButtonProps) {
  return (
    
      {children}
    
  );
}

Strategy 3: Stitches (CSS-in-JS)

Best for: Runtime theming, scoped styles

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

const StyledContent = styled(Dialog.Content, {
  backgroundColor: '$surface',
  borderRadius: '$md',
  padding: '$6',
  
  variants: {
    size: {
      small: { width: '300px' },
      medium: { width: '500px' },
      large: { width: '700px' },
    },
  },
  
  defaultVariants: {
    size: 'medium',
  },
});

---

Component Patterns

Pattern 1: Compound Components with Context

Use case: Share state between primitive parts

// Select.tsx
import * as Select from '@radix-ui/react-select';
import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';

export function CustomSelect({ items, placeholder, onValueChange }) {
  return (
    
      
        
        
          
        
      

      
        
          
            {items.map((item) => (
              
                {item.label}
                
                  
                
              
            ))}
          
        
      
    
  );
}

Pattern 2: Polymorphic Components with asChild

Use case: Render as different elements without losing behavior

// ✅ Render as Next.js Link but keep Radix behavior

  Open Settings


// ✅ Render as custom component

  }>Action

Why asChild matters: Prevents nested button/link issues in accessibility tree.

Pattern 3: Controlled vs Uncontrolled

// Uncontrolled (Radix manages state)

  Tab 1


// Controlled (You manage state)
const [activeTab, setActiveTab] = useState('tab1');


  Tab 1

Rule: Use controlled when you need to sync with external state (URL, Redux, etc.).

Pattern 4: Animation with Framer Motion

import * as Dialog from '@radix-ui/react-dialog';
import { motion, AnimatePresence } from 'framer-motion';

export function AnimatedDialog({ open, onOpenChange }) {
  return (
    
      
        
          {open && (
            <>
              
                
              
              
              
                
                  {/* Content */}
                
              
            
          )}
        
      
    
  );
}

---

Common Primitives Reference

Dialog (Modal)

 {/* State container */}
   {/* Opens dialog */}
   {/* Renders in portal */}
     {/* Backdrop */}
     {/* Modal content */}
       {/* Required for a11y */}
       {/* Required for a11y */}
       {/* Closes dialog */}
    
  

Dropdown Menu

  
  
    
      
      
      
      
        
      
       {/* Nested menus */}
        
        
      
    
  

Tabs

Tooltip

  
    
    
      
        Tooltip text
        
      
    
  

Popover

  
  
    
      Content
      
      
    
  

---

Accessibility Checklist

Every Component Must Have:

• Focus Management: Visible focus indicators on all interactive elements
• Keyboard Navigation: Full keyboard support (Tab, Arrows, Enter, Esc)
• ARIA Labels: Meaningful labels for screen readers
• Color Contrast: WCAG AA minimum (4.5:1 for text, 3:1 for UI)
• Error States: Clear error messages with aria-invalid and aria-describedby
• Loading States: Proper aria-busy during async operations

Dialog-Specific:

• Dialog.Title is present (required for screen readers)
• Dialog.Description provides context
• Focus trapped inside modal when open
• Escape key closes dialog
• Focus returns to trigger on close

Dropdown-Specific:

• Arrow keys navigate items
• Type-ahead search works
• First/last item wrapping behavior
• Selected state indicated visually and with ARIA

---

Best Practices

✅ Do This

1. Always use asChild to avoid wrapper divs

   
     Open
   
   

2. Provide semantic HTML

   
     
       {/* content */}
     
   
   

3. Use CSS variables for theming

   .dialog-content {
     background: hsl(var(--surface));
     color: hsl(var(--on-surface));
   }
   

4. Compose primitives for complex components

   function CommandPalette() {
     return (
       
         
            {/* Radix Combobox inside Dialog */}
         
       
     );
   }
   

❌ Don't Do This

1. Don't skip accessibility parts

   // ❌ Missing Title and Description
   
     Content
   
   

2. Don't fight the primitives

   // ❌ Overriding internal behavior
    e.stopPropagation()}>
   

3. Don't mix controlled and uncontrolled

   // ❌ Inconsistent state management
   
   

4. Don't ignore keyboard navigation

   // ❌ Disabling keyboard behavior
    e.preventDefault()}>
   

---

Real-World Examples

Example 1: Command Palette (Combo Dialog)

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

export function CommandPalette() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((open) => !open);
      }
    };
    document.addEventListener('keydown', down);
    return () => document.removeEventListener('keydown', down);
  }, []);

  return (
    
      
        
        
          
            
            
              No results found.
              
                Calendar
                Search Emoji
              
            
          
        
      
    
  );
}

Example 2: Dropdown Menu with Icons

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';

export function ActionsMenu() {
  return (
    
      
        
          
        
      

      
        
          
            Edit
          
          
            Duplicate
          
          
          
            Delete
          
        
      
    
  );
}

Example 3: Form with Radix Select + React Hook Form

import * as Select from '@radix-ui/react-select';
import { useForm, Controller } from 'react-hook-form';

interface FormData {
  country: string;
}

export function CountryForm() {
  const { control, handleSubmit } = useForm();

  return (
     console.log(data))}>
       (
          
            
              
              
            
            
            
              
                
                  United States
                  Canada
                  United Kingdom
                
              
            
          
        )}
      />
      Submit
    
  );
}

---

Troubleshooting

Problem: Dialog doesn't close on Escape key

Cause: onEscapeKeyDown event prevented or open state not synced

Solution:

  {/* Don't prevent default on escape */}

Problem: Dropdown menu positioning is off

Cause: Parent container has overflow: hidden or transform

Solution:

// Use Portal to render outside overflow container

  

Problem: Animations don't work

Cause: Portal content unmounts immediately

Solution:

// Use forceMount + AnimatePresence

  
    {open && }
  

Problem: TypeScript errors with asChild

Cause: Type inference issues with polymorphic components

Solution:

// Explicitly type your component

  Open

---

Performance Optimization

1. Code Splitting

// Lazy load heavy primitives
const Dialog = lazy(() => import('@radix-ui/react-dialog'));
const DropdownMenu = lazy(() => import('@radix-ui/react-dropdown-menu'));

2. Portal Container Reuse

// Create portal container once

  {/* All tooltips share portal container */}
  ...
  ...

3. Memoization

// Memoize expensive render functions
const SelectItems = memo(({ items }) => (
  items.map((item) => )
));

---

Integration with Popular Tools

shadcn/ui (Built on Radix)

shadcn/ui is a collection of copy-paste components built with Radix + Tailwind.

npx shadcn-ui@latest init
npx shadcn-ui@latest add dialog

When to use shadcn vs raw Radix:

• Use shadcn: Quick prototyping, standard designs
• Use raw Radix: Full customization, unique designs

Radix Themes (Official Styled System)

import { Theme, Button, Dialog } from '@radix-ui/themes';

function App() {
  return (
    
      Click me
    
  );
}

---

Related Skills

• @tailwind-design-system - Tailwind + Radix integration patterns
• @react-patterns - React composition patterns
• @frontend-design - Overall frontend architecture
• @accessibility-compliance - WCAG compliance testing

---

Resources

Official Documentation

• Radix UI Docs
• Radix Colors - Accessible color system
• Radix Icons - Icon library

Community Resources

• shadcn/ui - Component collection
• Radix UI Discord - Community support
• CVA Documentation - Variant management

Examples

• Radix Playground
• shadcn/ui Source - Production examples

---

Quick Reference

Installation

npm install @radix-ui/react-{primitive-name}

Basic Pattern

Key Props

• asChild - Render as child element
• defaultValue - Uncontrolled default
• value / onValueChange - Controlled state
• open / onOpenChange - Open state
• side / align - Positioning

---

Remember: Radix gives you behavior, you give it beauty. Accessibility is built-in, customization is unlimited.