重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
npx skills add https://github.com/noartem/skills --skill shadcn-vuenpx shadcn-vue@latest init
初始化期间:
New York 或 Default(之后无法更改!)Slate(推荐)是(暗黑模式必需)// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite"; // Tailwind v4
import path from "path";
export default defineConfig({
plugins: [vue(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
npx shadcn-vue@latest add button
| 需求 | 命令或文件 |
|---|---|
| 初始化项目 | npx shadcn-vue@latest init |
| 添加组件 | npx shadcn-vue@latest add button |
| 添加多个组件 | npx shadcn-vue@latest add button card dialog |
| 构建注册表 JSON | npx shadcn-vue@latest build |
| 生成组件文档 | npx tsx scripts/generate-shadcn-components.ts |
| 启用 CSS 变量 | components.json → tailwind.cssVariables: true |
| 添加注册表命名空间 | components.json → registries 映射 |
| Opencode MCP 初始化 | npx shadcn-vue@latest mcp init --client opencode |
| Codex MCP 配置 | ~/.codex/config.toml 包含 mcp_servers.shadcn |
模板 (templates/):
quick-setup.ts - 适用于 Vue/Nuxt 的完整设置指南及示例(190 行)参考文档 (references/):
cli.md - CLI 命令和选项mcp.md - MCP 设置、客户端配置、提示theming.md - 主题化和 cssVariableserror-catalog.md - 所有 7 个已记录的问题及其解决方案(267 行)component-examples.md - 所有 50+ 个组件示例及代码dark-mode-setup.md - 完整的暗黑模式实现指南data-tables.md - 使用 TanStack Table 的数据表格组件文档 (components/):
references/components.md - 所有 shadcn-vue 组件的索引components/<component>.md - 单个组件文档,包含安装、用法和示例官方文档 :
根据任务加载这些参考文档:
当出现以下情况时加载 references/error-catalog.md:
当出现以下情况时加载 references/components.md:
当出现以下情况时加载 references/component-examples.md:
当出现以下情况时加载 references/cli.md:
init、add、update)或提示的含义当出现以下情况时加载 references/dark-mode-setup.md:
当出现以下情况时加载 references/theming.md:
cssVariables、:root、.dark)当出现以下情况时加载 references/mcp.md:
components.json 中配置注册表当出现以下情况时加载 references/data-tables.md:
DataTable✅ 在添加组件之前运行 init
✅ 使用 CSS 变量进行主题化 (cssVariables: true)
✅ 配置 TypeScript 路径别名
components.json 中的别名匹配✅ 将 components.json 纳入版本控制
❌ 初始化后不要更改 style
❌ 不要混用 Radix Vue 和 Reka UI v2
❌ 不要跳过 TypeScript 配置
❌ 不要在没有 Tailwind CSS 的情况下使用
init 之前运行 add,导致缺少 components.json。@namespace/component)。tailwind.cssVariables: true 的情况下使用 CSS 变量类。# 在当前目录初始化
npx shadcn-vue@latest init
# 在特定目录初始化(monorepo)
npx shadcn-vue@latest init -c ./apps/web
# 添加单个组件
npx shadcn-vue@latest add button
# 添加多个组件
npx shadcn-vue@latest add button card dialog
# 添加所有组件
npx shadcn-vue@latest add --all
# 检查组件更新
npx shadcn-vue@latest diff button
# 为特定客户端初始化 MCP
npx shadcn-vue@latest mcp init --client opencode
npx shadcn-vue@latest mcp init --client codex
npx shadcn-vue@latest mcp init --client cursor
npx shadcn-vue@latest mcp init --client vscode
shadcn-vue 使用 components.json 进行配置:
@/components/ui)@/lib/utils)完整示例: 查看 templates/components.json 或通过 npx shadcn-vue@latest init 生成
@/lib/utils.ts 文件提供了用于合并 Tailwind 类的 cn() 辅助函数:
clsx + tailwind-merge 解决冲突由 shadcn-vue init 自动生成 - 无需手动设置。
每周安装次数
63
代码仓库
GitHub 星标
6
首次出现
2026年1月30日
安全审计
安装于
opencode59
codex55
gemini-cli54
github-copilot53
kimi-cli49
amp49
npx shadcn-vue@latest init
During initialization :
New York or Default (cannot change later!)Slate (recommended)Yes (required for dark mode)// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite"; // Tailwind v4
import path from "path";
export default defineConfig({
plugins: [vue(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
npx shadcn-vue@latest add button
| Need | Command or file |
|---|---|
| Initialize project | npx shadcn-vue@latest init |
| Add component | npx shadcn-vue@latest add button |
| Add multiple components | npx shadcn-vue@latest add button card dialog |
| Build registry JSON | npx shadcn-vue@latest build |
| Generate component docs | npx tsx scripts/generate-shadcn-components.ts |
| Enable CSS variables | components.json → |
Templates (templates/):
quick-setup.ts - Complete setup guide for Vue/Nuxt with examples (190 lines)References (references/):
cli.md - CLI commands and optionsmcp.md - MCP setup, client configs, promptstheming.md - Theming and cssVariableserror-catalog.md - All 7 documented issues with solutions (267 lines)component-examples.md - All 50+ component examples with codedark-mode-setup.md - Complete dark mode implementation guidedata-tables.md - Data tables with TanStack TableComponent Documentation (components/):
references/components.md - Index of all shadcn-vue componentscomponents/<component>.md - Individual component documentation with installation, usage, and examplesOfficial Documentation :
Load these references based on the task:
Loadreferences/error-catalog.md when:
Loadreferences/components.md when:
Loadreferences/component-examples.md when:
Loadreferences/cli.md when:
✅ Runinit before adding components
✅ Use CSS variables for theming (cssVariables: true)
✅ Configure TypeScript path aliases
components.json aliases✅ Keep components.json in version control
❌ Don't changestyle after initialization
❌ Don't mix Radix Vue and Reka UI v2
❌ Don't skip TypeScript configuration
❌ Don't use without Tailwind CSS
add before init and missing components.json.@namespace/component).tailwind.cssVariables: true.# Initialize in current directory
npx shadcn-vue@latest init
# Initialize in specific directory (monorepo)
npx shadcn-vue@latest init -c ./apps/web
# Add single component
npx shadcn-vue@latest add button
# Add multiple components
npx shadcn-vue@latest add button card dialog
# Add all components
npx shadcn-vue@latest add --all
# Check for component updates
npx shadcn-vue@latest diff button
# Initialize MCP for specific client
npx shadcn-vue@latest mcp init --client opencode
npx shadcn-vue@latest mcp init --client codex
npx shadcn-vue@latest mcp init --client cursor
npx shadcn-vue@latest mcp init --client vscode
shadcn-vue uses components.json to configure:
@/components/ui)@/lib/utils)Full example: See templates/components.json or generate via npx shadcn-vue@latest init
The @/lib/utils.ts file provides the cn() helper for merging Tailwind classes:
clsx + tailwind-merge for conflict resolutionAuto-generated by shadcn-vue init - no manual setup needed.
Weekly Installs
63
Repository
GitHub Stars
6
First Seen
Jan 30, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode59
codex55
gemini-cli54
github-copilot53
kimi-cli49
amp49
Nuxt 4 模式指南:SSR、混合渲染、路由规则与数据获取最佳实践
1,000 周安装
parallel-cli研究结果查询工具 - 获取parallel-agent-skills运行结果与数据分析
682 周安装
EnergyKit iOS 开发指南:Swift 6.2 电网电力预测与负载管理
692 周安装
HubSpot CRM 集成指南:使用 Membrane CLI 自动化销售、营销与客户服务
674 周安装
动效设计审查指南:Emil、Jakub、Jhey三大设计师视角与工作流程
694 周安装
专业转化文案撰写指南:提升营销效果与SEO优化的文案技巧
675 周安装
Obsidian Canvas 创建器:一键将文本转换为思维导图和视觉画布 | AI 驱动
690 周安装
tailwind.cssVariables: true| Add registry namespace | components.json → registries map |
| Opencode MCP init | npx shadcn-vue@latest mcp init --client opencode |
| Codex MCP config | ~/.codex/config.toml with mcp_servers.shadcn |
init, add, update) or what prompts meanLoadreferences/dark-mode-setup.md when:
Loadreferences/theming.md when:
cssVariables, :root, .dark)Loadreferences/mcp.md when:
components.jsonLoadreferences/data-tables.md when:
DataTable