shadcn-vue-skilld

Q: How do I install shadcn-vue-skilld?

Run npx skills add https://github.com/skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/shadcn-vue-skilld/ (personal) or .claude/skills/shadcn-vue-skilld/ (project).

by skilld-devFrontend & Design

Use when adding, configuring, or debugging shadcn-vue in a Vue or Nuxt project. Covers shadcn-vue CLI commands (init, add, apply, view, search, docs, info, diff, migrate, build, mcp), components.json, styles, presets, fonts, icon libraries, registries, the MCP server, and the programmatic API. Gives exact flags and config keys for shadcn-vue 2.8.2.

Installs: 173
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads shadcn-vue-skilld automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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 used reka-vega style names; those fail now. See changes.
toast and toaster are deprecated; use sonner (dist/transform-menu-CLNZ5vUh.js:446-454).
lucide-vue-next is the legacy icon package; current lucide package is @lucide/vue (dist/transform-menu-CLNZ5vUh.js:457, dist/icons/index.d.ts:3-10). Run migrate icons to switch libraries.
Registry style ids stay prefixed: the vega style fetches from reka-vega (dist/registry-hxzbzXMt.js:492-496). Fallback style id is new-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_URL and REGISTRY_URL override the default https://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 in components.json under registries.

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.

References

CLI reference
components.json
Styles and presets
Registries and programmatic API
MCP server
Changes in 2.7 and 2.8

FAQ

What does the shadcn-vue-skilld skill do?

How do I install shadcn-vue-skilld?

Run npx skills add https://github.com/skilld-dev/vue-ecosystem-skills --skill shadcn-vue-skilld in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/shadcn-vue-skilld/ (personal) or .claude/skills/shadcn-vue-skilld/ (project).

Which AI agents can use shadcn-vue-skilld?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is shadcn-vue-skilld safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains shadcn-vue-skilld?

It is published by skilld-dev in skilld-dev/vue-ecosystem-skills. It has 173 recorded installs.