shadcn
Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.
Profile →npx skills add sickn33/agentic-awesome-skills --skill shadcn --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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. ## When to Use - Use when adding new components from shadcn/ui or community registries. - Use when styling, composing, or debugging existing shadcn/ui components. - Use when initializing a new project or switching design system presets. - Use to retrieve component documentation, examples, and API references. ## Current Project Context ```json !`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'` ``` 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. ## Principles 1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check commun
- When to Use
- Current Project Context
- Principles
- Critical Rules
- Styling & Tailwind → [styling.md](./rules/styling.md)
- Forms & Inputs → [forms.md](./rules/forms.md)
- Component Structure → [composition.md](./rules/composition.md)
- Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
- Icons → [icons.md](./rules/icons.md)
- CLI
- Key Patterns
- Component Selection
- Key Fields
- Component Docs, Examples, and Usage
npx shadcn@latest docs button dialog select Create a new project. npx shadcn@latest init --name my-app --preset base-nova npx shadcn@latest init --name my-app --preset a2r6bw --template vite Create a monorepo project. npx shadcn@latest init --name my-app --preset base-nova --monorepo npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo Initialize existing project. npx shadcn@latest init --preset base-nova npx shadcn@latest init --defaults # shortcut: --template=next --preset=base-nova
What does the shadcn skill do?
Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill shadcn --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.