shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
Install
Install this Claude and Codex skill with the command below. The command stays visible even when copy support is unavailable.
git clone https://github.com/shadcn-ui/ui /tmp/ui && ln -s /tmp/ui/skills/shadcn ~/.claude/skills/shadcnFrom README
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, or bunx --bun shadcn@latest — based on the project's packageManager. Examples below use npx shadcn@latest but substitute the correct runner for the project. Current Project Context The JSON above contains the project config and installed components. Use npx shadcn@latest docs to get documentation and example URLs for any component. Principles Use existing components first. Use npx shadcn@latest search to check registries before writing custom UI. Check community registries too. Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. Use built-in variants before custom styles. variant="outline", size="sm", etc. Use semantic colors.