# Shadcn UI

Install and configure shadcn/ui components for React projects.

- Repository: https://github.com/jezweb/claude-skills (1094 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-09
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jezweb/claude-skills --skill shadcn-ui -g -a claude-code -y`
Codex: `npx skills add jezweb/claude-skills --skill shadcn-ui -g -a codex -y`
Cursor: `npx skills add jezweb/claude-skills --skill shadcn-ui -g -a cursor -y`
Gemini CLI: `npx skills add jezweb/claude-skills --skill shadcn-ui -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jezweb/claude-skills`

## Description

Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# shadcn/ui Components

Add shadcn/ui components to a themed React project. This skill runs AFTER `tailwind-theme-builder` has set up CSS variables, ThemeProvider, and dark mode. It handles component installation, customisation, and combining components into working patterns.

**Prerequisite**: Theme infrastructure must exist (CSS variables, components.json, cn() utility). Use `tailwind-theme-builder` first if not set up.

## Installation Order

Install components in dependency order. Foundation components first, then feature components:

### Foundation (install first)

```bash
pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add input label
pnpm dlx shadcn@latest add card
```

### Feature Components (install as needed)

```bash
# Forms
pnpm dlx shadcn@latest add form        # needs: react-hook-form, zod, @hookform/resolvers
pnpm dlx shadcn@latest add textarea select checkbox switch

# Feedback
pnpm dlx shadcn@latest add toast        # needs: sonner
pnpm dlx shadcn@latest add alert badge

# Overlay
pnpm dlx shadcn@latest add dialog sheet popover dropdown-menu

# Data Display
pnpm dlx shadcn@latest add table        # for data tables, also: @tanstack/react-table
pnpm dlx shadcn@latest add tabs separator avatar

# Navigation
pnpm dlx shadcn@latest add navigation-menu command
```

### External Dependencies

| Component | Requires |
|-----------|----------|
| Form | `react-hook-form`, `zod`, `@hookform/resolvers` |
| Toast | `sonner` |
| Data Table | `@tanstack/react-table` |
| Command | `cmdk` |
| Date Picker | `date-fns` (optional) |

Install external deps separately: `pnpm add react-hook-form zod @hookform/resolvers`

## Known Gotchas

These are documented corrections that prevent common bugs:

### Radix Select, No Empty Strings

```tsx
// Don't use empty string values
<SelectItem value="">All</SelectItem>           // BREAKS

// Use sentinel value
<SelectItem value="__any__">All</SelectItem>    // WORKS
const actual = value === "__any__" ? "" : value
```

The rest: https://github.com/jezweb/claude-skills/blob/HEAD/plugins/frontend/skills/shadcn-ui/SKILL.md