shadcn-ui

SKILL.md

Install and configure shadcn/ui components in themed React projects with guided component selection and common UI patterns.

Requires tailwind-theme-builder to have set up CSS variables, ThemeProvider, and dark mode infrastructure first

Covers 20+ components organized by category: foundation (button, input, card), forms (form, textarea, select), feedback (toast, alert), overlays (dialog, sheet, popover), data display (table, tabs), and navigation

Documents installation order, external dependencies (react-hook-form, zod, sonner, @tanstack/react-table), and four critical gotchas (Radix Select empty strings, React Hook Form null handling, Lucide icon tree-shaking, Dialog width overrides)

Includes recipes for contact forms, data tables, modal CRUD, navigation, and settings pages; customization via semantic CSS tokens and variant extension

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)

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

Feature Components (install as needed)