# Radix Ui

> >

- **Type:** Skill
- **Install:** `agentstack add skill-acaprino-claude-code-daodan-radix-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [acaprino](https://agentstack.voostack.com/s/acaprino)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [acaprino](https://github.com/acaprino)
- **Source:** https://github.com/acaprino/claude-code-daodan/tree/master/plugins/frontend/skills/radix-ui

## Install

```sh
agentstack add skill-acaprino-claude-code-daodan-radix-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Radix UI Expert

Guidance for building accessible, composable UIs with Radix UI. Covers both Primitives (unstyled, headless) and Themes (pre-styled design system).

Docs: https://www.radix-ui.com

## Two Products

| Product | What it is | Install | Use when |
|---------|-----------|---------|----------|
| **Primitives** | Unstyled, accessible component primitives | `npm i radix-ui` | Building custom design systems, need full style control |
| **Themes** | Pre-styled component library built on Primitives | `npm i @radix-ui/themes` | Want production-ready styled components out of the box |

**shadcn/ui** is built on top of Radix Primitives. If working with shadcn, route to the **shadcn-ui** skill instead.

## When This Skill Activates

- Installing or using `radix-ui` or `@radix-ui/react-*` packages
- Building accessible components (dialog, popover, dropdown, accordion)
- Using `asChild` prop for composition
- Animating Radix components (enter/exit transitions)
- Configuring Radix Themes (colors, radius, scaling)
- Questions about WAI-ARIA patterns, keyboard navigation, focus management

## Synergy with Other Frontend Skills

| Need | Route to |
|------|----------|
| shadcn/ui components (Radix + Tailwind, pre-composed) | **shadcn-ui** |
| CSS architecture, modern CSS features | **frontend-design** |
| Page layout composition, grid systems | **frontend-layout** agent |
| Animations, micro-interactions, visual polish | **frontend-design** agent |
| Distinctive visual identity | **frontend-css** skill |
| daisyUI components (different library, class-based) | **daisyui** |

## Live Component Lookup

This skill covers architecture, composition patterns, and the most common components. For any specific component's full API -- spawn a **quick-searcher** agent.

### URL patterns

| Resource | URL pattern |
|----------|-------------|
| Primitives component | `https://www.radix-ui.com/primitives/docs/components/{name}` |
| Primitives guides | `https://www.radix-ui.com/primitives/docs/guides/{topic}` |
| Themes component | `https://www.radix-ui.com/themes/docs/components/{name}` |
| Themes overview | `https://www.radix-ui.com/themes/docs/overview/{topic}` |
| Themes theming | `https://www.radix-ui.com/themes/docs/theme/{topic}` |
| Colors reference | `https://www.radix-ui.com/colors` |

---

# Radix Primitives

## Core Philosophy

Radix Primitives are **unstyled, accessible** UI components. They handle the hard parts (WAI-ARIA compliance, keyboard navigation, focus management, screen reader support) while you own all styling. Three key principles:

1. **Unstyled** - zero CSS shipped, style with anything (Tailwind, CSS Modules, styled-components)
2. **Accessible** - WAI-ARIA design patterns, full keyboard navigation, screen reader tested
3. **Composable** - granular sub-components, `asChild` for element delegation, controlled/uncontrolled

## Installation

```bash
# Unified package (recommended, tree-shakeable)
npm install radix-ui

# Or individual packages
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu
```

## Component Catalog (Primitives)

See [references/primitives-components.md](references/primitives-components.md) for detailed sub-component APIs.

| Category | Components |
|----------|------------|
| Overlay | Dialog, Alert Dialog, Popover, Hover Card, Tooltip |
| Menu | Dropdown Menu, Context Menu, Menubar |
| Navigation | Navigation Menu, Tabs |
| Form | Checkbox, Radio Group, Select, Slider, Switch, Toggle, Toggle Group, Form |
| Disclosure | Accordion, Collapsible |
| Media | Avatar, Aspect Ratio, Progress |
| Layout | Scroll Area, Separator, Toolbar |
| Utility | Label, Portal, Slot, Visually Hidden, Direction Provider |
| Deprecated | Toast (use Sonner instead) |

## Composition Model

### Sub-component architecture

Every Radix component is split into named parts that you compose:

```tsx
import * as Dialog from "radix-ui/components/dialog"

  Open
  
    
    
      Edit Profile
      Make changes to your profile.
      {/* form content */}
      X
    
  

```

### asChild prop

The `asChild` prop delegates rendering to the child element, merging Radix behavior onto your own component:

```tsx
// Default: Radix renders a 
Open

// asChild: Radix merges onto YOUR element

  Open Settings

```

Requirements for custom components with `asChild`:
1. **Spread all props** onto the DOM element
2. **Forward ref** using `React.forwardRef` (or ref prop in React 19)

```tsx
const MyButton = React.forwardRef(
  ({ children, ...props }, ref) => (
    
      {children}
    
  )
)

  Open

```

### Composing multiple primitives

`asChild` nests to combine behaviors:

```tsx

  
    Edit
  

```

### Controlled vs uncontrolled

All stateful components support both patterns:

```tsx
// Uncontrolled (default) - component manages its own state

// Controlled - you manage state
const [value, setValue] = useState("item-1")

```

## Data Attributes

Radix exposes state via `data-*` attributes for CSS styling:

| Attribute | Values | Used for |
|-----------|--------|----------|
| `[data-state]` | `"open"` / `"closed"` | Overlays, disclosure |
| `[data-state]` | `"checked"` / `"unchecked"` / `"indeterminate"` | Checkboxes, switches |
| `[data-state]` | `"active"` / `"inactive"` | Tabs, toggles |
| `[data-disabled]` | present/absent | Disabled elements |
| `[data-orientation]` | `"vertical"` / `"horizontal"` | Accordion, tabs, separator |
| `[data-highlighted]` | present/absent | Menu items (keyboard focus) |
| `[data-side]` | `"top"` / `"right"` / `"bottom"` / `"left"` | Positioned content |
| `[data-align]` | `"start"` / `"center"` / `"end"` | Positioned content |

### Styling with data attributes

```css
/* Tailwind */

/* Plain CSS */
.AccordionContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state="closed"] {
  animation: slideUp 300ms ease-in;
}
```

## Animation Patterns

See [references/patterns.md](references/patterns.md) for detailed animation patterns.

### CSS animations (recommended)

Radix suspends unmounting during CSS animations, enabling exit animations:

```css
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.DialogOverlay[data-state="open"] { animation: fadeIn 200ms ease-out; }
.DialogOverlay[data-state="closed"] { animation: fadeOut 200ms ease-in; }
```

### CSS variables for dynamic sizing

Accordion and Collapsible expose size variables for smooth height animation:

```css
.AccordionContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
@keyframes slideDown {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}
```

### JavaScript animation libraries

Use `forceMount` to prevent Radix from unmounting content, letting your library control the exit:

```tsx

  
    {open && (
      
        
          Content
        
      
    )}
  

```

## Keyboard Navigation

All Radix components implement WAI-ARIA keyboard patterns:

| Component | Keys |
|-----------|------|
| Dialog | `Esc` close, `Tab` trap focus |
| Dropdown Menu | `Arrow` navigate, `Enter`/`Space` select, `Esc` close |
| Accordion | `Arrow` navigate triggers, `Enter`/`Space` toggle, `Home`/`End` |
| Tabs | `Arrow` switch tabs, `Tab` move to panel |
| Select | `Arrow` navigate, `Enter`/`Space` select |
| Slider | `Arrow` adjust, `Home`/`End` min/max |
| Radio Group | `Arrow` navigate, `Space` select |

## Accessibility Guarantees

Radix handles automatically:
- ARIA attributes (`role`, `aria-expanded`, `aria-controls`, `aria-labelledby`)
- Focus management (trap in dialogs, restore on close)
- Screen reader announcements
- Keyboard interaction patterns per WAI-ARIA spec
- RTL support via `dir` prop / `DirectionProvider`

What you must provide:
- `Title` and `Description` for dialogs/alert dialogs (or use `VisuallyHidden`)
- `aria-label` for icon-only triggers
- Meaningful content for screen readers
- Logical tab order in your layout

---

# Radix Themes

## Overview

Pre-styled component library with built-in theming. Uses Radix Primitives internally but ships with styles, a color system, and layout primitives.

## Installation

```bash
npm install @radix-ui/themes
```

```tsx
// app/layout.tsx or main entry
import "@radix-ui/themes/styles.css"
import { Theme } from "@radix-ui/themes"

export default function Layout({ children }) {
  return (
    
      {children}
    
  )
}
```

## Theme Configuration

```tsx

```

### ThemePanel (development)

```tsx
import { ThemePanel } from "@radix-ui/themes"
  // interactive UI for previewing theme changes
```

## Color System

See [references/themes-colors.md](references/themes-colors.md) for the full color reference.

### 12-step scales

Each color has 12 steps from subtle backgrounds to high-contrast text:

| Steps | Purpose | Example variable |
|-------|---------|-----------------|
| 1-2 | Backgrounds | `var(--accent-1)`, `var(--accent-2)` |
| 3-5 | Interactive states | `var(--accent-3)` hover, `var(--accent-4)` active |
| 6-8 | Borders | `var(--accent-6)` subtle, `var(--accent-8)` strong |
| 9-10 | Solid fills | `var(--accent-9)` primary, `var(--accent-10)` hover |
| 11-12 | Text | `var(--accent-11)` low contrast, `var(--accent-12)` high |

### Accent colors (24)

Gray, Gold, Bronze, Brown, Yellow, Amber, Orange, Tomato, Red, Ruby, Crimson, Pink, Plum, Purple, Violet, Iris, Indigo, Blue, Cyan, Teal, Jade, Green, Grass, Lime, Mint, Sky.

### Gray colors (6)

Gray, Mauve, Slate, Sage, Olive, Sand. Auto-paired with accent but overridable.

### Special tokens

- `var(--accent-surface)` - translucent accent for surface backgrounds
- `var(--accent-indicator)` - for selection indicators
- `var(--accent-track)` - for slider/progress tracks
- `var(--accent-contrast)` - guaranteed readable text on accent-9
- `var(--color-background)` - page background
- `var(--color-overlay)` - overlay/backdrop

### Per-component color override

```tsx
Delete  // overrides theme accent for this button
Active
```

## Themes Component Catalog

| Category | Components |
|----------|------------|
| Layout | Box, Flex, Grid, Section, Container |
| Typography | Text, Heading, Code, Quote, Em, Strong, Kbd |
| Form | Button, IconButton, TextField, TextArea, Select, Checkbox, Radio Group, Switch, Slider, SegmentedControl |
| Overlay | Dialog, Alert Dialog, Popover, Hover Card, Tooltip, Context Menu, Dropdown Menu |
| Data Display | Table, Avatar, Badge, Callout, Card, Data List, Inset, Separator, Skeleton |
| Feedback | Progress, Spinner |
| Navigation | Tabs, Tab Nav, Link |

### Common props pattern

Most Themes components share:

```tsx

```

## Best Practices

See [references/patterns.md](references/patterns.md) for detailed patterns.

1. **Always include Title + Description** in Dialog/AlertDialog (use `VisuallyHidden` if not visible)
2. **Use `asChild` for routing** -- compose Trigger onto `` or router components
3. **Prefer CSS animations** over JS libraries for Radix transitions (simpler, no `forceMount` needed)
4. **Use data attributes for styling** -- `[data-state]`, `[data-highlighted]` are stable API
5. **Don't skip sub-components** -- `Dialog.Overlay`, `Dialog.Portal` exist for a reason
6. **Controlled only when needed** -- uncontrolled (default) reduces boilerplate
7. **Forward refs** in custom components used with `asChild`
8. **Use Portal** for overlays -- prevents z-index and overflow issues
9. **Test keyboard navigation** -- Radix handles it, but verify in your layout context
10. **Use Themes for rapid prototyping**, Primitives for custom design systems

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [acaprino](https://github.com/acaprino)
- **Source:** [acaprino/claude-code-daodan](https://github.com/acaprino/claude-code-daodan)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-acaprino-claude-code-daodan-radix-ui
- Seller: https://agentstack.voostack.com/s/acaprino
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.