shadcn-ui

Use when working with shadcn/ui components, Radix UI primitives, or building UI with copy-paste components on Tailwind. Also use when setting up shadcn/ui CLI, theming with CSS variables, or composing complex components like data tables or command palettes.

Model	Source
sonnet	pack: frontend

Full Reference

┏━ 🔧 shadcn-ui ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when working with shadcn/ui components, Ra… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

shadcn/ui

your friendly armadillo is here to serve you

shadcn/ui is a copy-paste component library built on Radix UI (or Base UI) primitives and Tailwind CSS. Components live in your codebase — not in node_modules. No runtime library, full ownership.

Quick Reference

Item	Value
CLI	npx shadcn@latest (NOT shadcn-ui — deprecated Aug 2024)
New project	npx shadcn create (visual builder, Dec 2025)
Add to existing	npx shadcn@latest init
Add component	npx shadcn@latest add button
Default style	new-york (default deprecated Feb 2025)
Tailwind v4	Fully supported — requires @theme inline directive
Colors	OKLCH format (migrated from HSL in Feb 2025)
Primitives	Radix UI or Base UI (your choice since Dec 2025)
Docs	https://ui.shadcn.com

Reference Index

File	When to use
reference/setup.md	Installing shadcn/ui, CLI commands, components.json config, globals.css structure
reference/theming.md	CSS tokens, OKLCH colors, dark mode, custom tokens, data-slot overrides
reference/components.md	Full component catalog, Radix primitives, asChild pattern, keyboard nav
reference/data-tables.md	TanStack Table setup, Combobox pattern, Command palette (⌘K)
reference/forms.md	React Hook Form + Zod, Form/FormField primitives, Field component
reference/changelog.md	Breaking changes 2024–2026, migration commands, what’s new

Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.