shadcn: a Claude Code skill by shadcn
Official
For React developers on shadcn/ui who want Claude to add and compose components through the CLI. Skip it if your project has no components.json and you do not plan one.
- Score
- 93of 100
- Rank
- #4of 239
- Installs
- 415Kon skills.sh
- Security
- Mixed 5 scanners
- Updated
- 2026
- Context
- ~124tokens always
Install
npx skills add https://github.com/shadcn-ui/ui --skill shadcn
Run it in your terminal. View the source
Using the Claude app rather than Claude Code? You can add a skill there too. How to add it in the app
What does shadcn do?
shadcn is a Claude skill that guides Claude through projects built on shadcn/ui. When it loads, it runs npx shadcn@latest info --json to read your config, installed components, Tailwind version, icon library and import aliases. Claude then searches registries, fetches component docs with the docs command, and installs with add, previewing updates with --dry-run and --diff. It enforces rules such as FieldGroup for forms, gap instead of space-y, semantic color tokens and a title on every dialog. It also handles preset codes with apply and preset decode, chat UI primitives, and building a themed design system from a DESIGN.md file.
When should you use shadcn?
Use it when
- Adding or updating components in an existing shadcn/ui app
- Applying a preset code to restyle a project
- Turning a DESIGN.md brand spec into themed components
Skip it when
- Your interface uses a different component library
- You are not building with React and Tailwind
What it needs and what it can touch
You need
- Node.js with npx, pnpm or bun
What it can do
- Runs the shadcn CLI through npx, pnpm dlx or bunx
- Reads and edits project files
- Fetches component docs from the web
From reading its instructions, not from running it.
Why it scores 93
Strongest on upkeep (100 of 100), weakest on adoption (83).
Is shadcn safe to install?
At least one scanner raised a medium warning. Read the results below. Scanners often miss what other scanners catch, and a skill can change after a scan. Read its source before you install it.
| Scanner | Result | Date |
|---|---|---|
| Gen Agent Trust Hub | Passed | Oct 15, 2026 |
| Socket | Medium risk | Oct 15, 2026 |
| Snyk | Low risk | Oct 15, 2026 |
| Runlayer | Passed | Mar 13, 2026 |
| ZeroLeaks | Passed | Apr 15, 2026 |
Details
- Installs
- 414,947
- Repository stars
- 127,835
- Last repository change
- Tokens always loaded
- about 124
- Tokens when used
- about 5,212
- License
- MIT
- Data confidence
- High
Did it do the job for you?
Alternatives to shadcn
All skills for this job-
Get shadcn-uishadcn-ui
For React developers setting up shadcn/ui components, Zod forms and Tailwind themes.
-
Get tailwind-design-systemtailwind-design-system
For developers setting up a component library or design tokens on Tailwind CSS v4.
-
Get impeccableimpeccable
For designers and developers who want named commands such as polish, critique and quieter for interface work.
-
Get web-artifacts-builderweb-artifacts-builder
For developers making multi-screen claude.ai artifacts with state, routing or shadcn/ui parts.
shadcn