shadcn
Manage shadcn/ui components, projects, and design systems with CLI-driven installation and composition.
- Adds components as source code to projects via CLI; supports component search, documentation lookup, and registry browsing across official and community registries
- Enforces strict composition rules: FieldGroup + Field for forms, semantic color tokens, gap-based spacing, and component-specific patterns (e.g., SelectItem inside SelectGroup, DialogTitle required for accessibility)
- Provides project context injection including installed components, aliases, framework type, icon library, and Tailwind version to guide correct implementation
- Includes smart update workflows with
--dry-runand--diffflags for merging upstream changes while preserving local modifications; supports preset switching with reinstall, merge, or skip options
This skill contains shell command directives (!`command`) that may execute system commands. Review carefully before installing.
shadcn/ui
A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
IMPORTANT: Run all CLI commands using the project's package runner:
npx shadcn@latest,pnpm dlx shadcn@latest, orbunx --bun shadcn@latest— based on the project'spackageManager. Examples below usenpx shadcn@latestbut substitute the correct runner for the project.
Current Project Context
!`npx shadcn@latest info --json`
The JSON above contains the project config and installed components. Use npx shadcn@latest docs <component> to get documentation and example URLs for any component.