Shadcn
Add, search, fix, and compose shadcn/ui components via the official CLI against your components.json setup.
Overview
shadcn is an agent skill for the Build phase that manages shadcn/ui components—init, add, search, fix, debug, style, and compose—using the documented CLI against components.json.
Install
npx skills add https://github.com/shadcn-ui/ui --skill shadcnWhat is this skill?
- CLI command surface: init, apply, add (with dry-run and smart merge), search, view, docs, info, build
- Reads configuration from components.json; never invents undocumented CLI flags
- Template presets for next, vite, start, react-router, and astro project shapes
- Runs via project package runner: npx shadcn@latest, pnpm dlx, or bunx—no --package-manager flag
- Covers preset formats (named, code, URL) and switching presets without breaking imports
- Eight documented CLI command areas: init, apply, add, search, view, docs, info, build
- Five named framework templates: next, vite, start, react-router, astro
Adoption & trust: 2.3k installs on skills.sh; 116k GitHub stars; trending (+100% hot-view momentum).
What problem does it solve?
Your coding agent guesses shadcn CLI flags or the wrong package runner and breaks components.json or duplicates UI files.
Who is it for?
Solo builders on Next, Vite, or Astro stacks who want copy-paste-free, CLI-accurate shadcn/ui maintenance in the repo.
Skip if: Non-React UI stacks, or teams that do not use shadcn/ui and components.json at all.
When should I use this skill?
Managing shadcn/ui components—adding, searching, fixing, debugging, styling, and composing UI with the shadcn CLI.
What do I get? / Deliverables
You run documented shadcn@latest commands with the correct runner so components install, merge, and resolve against your preset and framework template.
- Installed or updated shadcn/ui component files merged into the project tree
- Aligned components.json preset and template configuration
Recommended Skills
Journey fit
shadcn/ui work sits in Build because you install and maintain UI primitives while assembling the product interface. Frontend is the canonical shelf for component libraries, CLI add/init flows, and template wiring (Next, Vite, Astro).
How it compares
Official CLI workflow reference—not a replacement for Figma handoff or a full design-system governance process.
Common Questions / FAQ
Who is shadcn for?
Indie developers and agent-assisted builders maintaining shadcn/ui in React or meta-framework projects who need reliable init, add, and search commands.
When should I use shadcn?
Use it in Build frontend when initializing shadcn, adding components with dry-run or smart merge, fixing imports after preset changes, or matching CLI behavior to next, vite, start, react-router, or astro templates.
Is shadcn safe to install?
Check the Security Audits panel on this Prism page; the skill instructs CLI execution that modifies your filesystem—review diffs before committing.
SKILL.md
READMESKILL.md - Shadcn
interface: display_name: "shadcn/ui" short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI." icon_small: "./assets/shadcn-small.png" icon_large: "./assets/shadcn.png" # shadcn CLI Reference Configuration is read from `components.json`. > **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. > **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag. ## Contents - Commands: init, apply, add (dry-run, smart merge), search, view, docs, info, build - Templates: next, vite, start, react-router, astro - Presets: named, code, URL formats and fields - Switching presets --- ## Commands ### `init` — Initialize or create a project ```bash npx shadcn@latest init [components...] [options] ``` Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step. | Flag | Short | Description | Default | | ----------------------- | ----- | --------------------------------------------------------- | ------- | | `--template <template>` | `-t` | Template (next, start, vite, next-monorepo, react-router) | — | | `--preset [name]` | `-p` | Preset configuration (named, code, or URL) | — | | `--yes` | `-y` | Skip confirmation prompt | `true` | | `--defaults` | `-d` | Use defaults (`--template=next --preset=base-nova`) | `false` | | `--force` | `-f` | Force overwrite existing configuration | `false` | | `--cwd <cwd>` | `-c` | Working directory | current | | `--name <name>` | `-n` | Name for new project | — | | `--silent` | `-s` | Mute output | `false` | | `--rtl` | | Enable RTL support | — | | `--reinstall` | | Re-install existing UI components | `false` | | `--monorepo` | | Scaffold a monorepo project | — | | `--no-monorepo` | | Skip the monorepo prompt | — | `npx shadcn@latest create` is an alias for `npx shadcn@latest init`. ### `apply` — Apply a preset to an existing project ```bash npx shadcn@latest apply [preset] [options] ``` Applies a preset to an existing project, overwriting preset-driven config, fonts, CSS variables, and detected UI components. | Flag | Short | Description | Default | | ------------------- | ----- | ------------------------------------------ | ------- | | `--preset <preset>` | — | Preset configuration (named, code, or URL) | — | | `--yes` | `-y` | Skip confirmation prompt | `false` | | `--cwd <cwd>` | `-c` | Working directory | current | | `--silent` | `-s` | Mute output | `false` | `[preset]` is a shorthand for `--preset <preset>`. If both are provided, they must match. If no preset is provided, the CLI offers to open the custom preset builder on `ui.shadcn.com/create`. ### `add` — Add components > **IMPORTANT:** To compare local components against upstream or to preview changes, ALWAYS use `npx shadcn@lates