shadcn-vue
Version: shadcn-vue@2.8.2 (prepared source package.json:4; npm latest dist-tag, checked 2026-09-22).
Stack: Vue 3.5+, reka-ui ^2.10.1, Tailwind CSS ^4.3.2 (package.json:68,88,91). One base: reka.
Run the CLI with pnpm dlx shadcn-vue@latest <command> (or npx, npm exec, bunx).
What it does
The CLI copies component source files into your project and installs their npm dependencies.
You own the copied code. Edit components/ui/** freely; re-running add with -o, --overwrite replaces your edits.
Core workflow
# New or existing project: write components.json, install deps, set up CSS
pnpm dlx shadcn-vue@latest init
# Add components (also: URL, local file, @namespace/item, owner/repo/item)
pnpm dlx shadcn-vue@latest add button card dialog
# Preview without writing, then install
pnpm dlx shadcn-vue@latest add sidebar --dry-run
pnpm dlx shadcn-vue@latest add sidebar
# Usage docs and examples for a component
pnpm dlx shadcn-vue@latest docs button
Rules that prevent bugs
- Item names resolve in this order: URL, local file,
@namespace/item,owner/repo/item[#ref], then plain name in the default registry (dist/registry-hxzbzXMt.js:1870-1891, https://www.shadcn-vue.com/docs/cli#add). - Preset names have no prefix in 2.8.x:
vega,nova,maia,lyra,mira,luma,sera(dist/registry-hxzbzXMt.js:3141-3244). Older docs and the 2.6.x baseline usedreka-vegastyle names; those fail now. See changes. toastandtoasterare deprecated; usesonner(dist/transform-menu-CLNZ5vUh.js:446-454).lucide-vue-nextis the legacy icon package; current lucide package is@lucide/vue(dist/transform-menu-CLNZ5vUh.js:457,dist/icons/index.d.ts:3-10). Runmigrate iconsto switch libraries.- Registry style ids stay prefixed: the
vegastyle fetches fromreka-vega(dist/registry-hxzbzXMt.js:492-496). Fallback style id isnew-york-v4. apply <preset>rewrites UI components, fonts, and CSS variables. Commit first; the CLI warns the same (dist/index.js:2252-2254).- Registry env:
SHADCN_VUE_URLandREGISTRY_URLoverride the defaulthttps://shadcn-vue.com/r(dist/transform-menu-CLNZ5vUh.js:2-3). Use for local registry testing. - Builtin namespace is
@shadcn(dist/transform-menu-CLNZ5vUh.js:445). Third-party namespaces must be configured incomponents.jsonunderregistries.
Command map
| Command | Purpose | Key options |
|---|---|---|
init (alias create) | Set up project, write components.json | -p <preset>, -t <template>, --style, --icon-library, --font, -b <base-color>, -d, --silent |
add | Install items | -o, -a, -p <path>, --dry-run, --diff, --view |
apply | Apply a preset to an existing project | -y |
view | Inspect items before install | -c <cwd> |
search (alias list) | Fuzzy search registries (@name args) | -q, -l, -o |
docs | Component docs and examples | --json, -b <base> |
info | Project setup report | --json |
diff | Compare installed item against registry | -y |
migrate | icons or rtl migration | -l, [path] |
build | Build registry.json into registry JSON | -o <path> |
mcp init | Write MCP client config | --client claude|cursor|vscode |
Full flags: cli reference.
Configuration
components.json at project root drives everything. Key fields: style, typescript, tailwind.css, tailwind.baseColor, aliases, iconLibrary, rtl, pointer, menuColor, menuAccent, registries.
Full schema and examples: components-json reference.
Styles and presets
Seven named presets (vega to sera), eight valid styles in encoded preset codes (adds rhea), five icon libraries, 24 fonts. Details and tables: styles reference.
Programmatic API
Import from shadcn-vue, shadcn-vue/registry, shadcn-vue/schema, shadcn-vue/utils, shadcn-vue/icons, shadcn-vue/preset, shadcn-vue/mcp, shadcn-vue/tailwind.css (package.json:27-59).
Exports and error classes: registries reference.