shadcn-vue by noartem/laravel-vue-skills
npx skills add https://github.com/noartem/laravel-vue-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: * 用户遇到“组件未找到”或导入错误
* 设置命令失败或出现配置问题
* Tailwind CSS 变量或 TypeScript 路径损坏
* **触发短语**:“不工作”、“错误”、“无法”、“损坏”
2. 当出现以下情况时,加载references/components.md:
* 用户询问有哪些组件可用(名称、类别、状态)
* 用户需要添加/使用一个组件,并想知道正确的安装/导入路径
* 在推荐自定义构建之前,你需要确认某个组件是否存在
3. 当出现以下情况时,加载references/component-examples.md:
* 用户询问“如何实现 [组件]?”
* 需要特定组件的复制粘贴示例
* 构建表单、表格、导航或数据显示
* **触发短语**:“示例”、“如何使用”、“实现”、“代码示例”
4. 当出现以下情况时,加载references/cli.md:
* 用户询问如何运行 CLI(`init`、`add`、`update`)或提示的含义
* 需要安装一个或多个组件的精确命令/标志
* 排查 CLI 相关问题(注册表、路径、覆盖)
5. 当出现以下情况时,加载references/dark-mode-setup.md:
* 实现暗黑模式 / 主题切换
* 用户提到 Vue 3 + Vite、Nuxt 或 Astro 设置
* 需要主题管理的组合式模式
* **触发短语**:“暗黑模式”、“主题”、“亮/暗”、“配色方案”
6. 当出现以下情况时,加载references/theming.md:
* 用户希望通过 CSS 变量自定义主题令牌(`cssVariables`、`:root`、`.dark`)
* 需要将 Tailwind 连接到基于 CSS 变量的颜色和圆角
* 为 shadcn-vue 设置/调整设计令牌(颜色、圆角、排版)
7. 当出现以下情况时,加载references/mcp.md:
* 为 opencode、Codex、Cursor、VS Code 设置 MCP 服务器
* 在 `components.json` 中配置注册表
* 排查缺少组件或注册表命名空间的问题
* **触发短语**:“MCP”、“opencode”、“codex”、“cursor”、“registry”
8. 当出现以下情况时,加载references/data-tables.md:
* 构建可排序/可过滤/可分页的表格
* 用户提到 TanStack Table 或 `DataTable`
* **触发短语**:“数据表格”、“表格”、“tanstack”、“排序”、“分页”
✅ 在添加组件之前运行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 自动生成 - 无需手动设置。
每周安装量
401
代码仓库
GitHub 星标
6
首次出现
2026年1月25日
安全审计
安装于
opencode351
github-copilot340
gemini-cli336
codex336
amp314
kimi-cli307
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
401
Repository
GitHub Stars
6
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketWarnSnykPass
Installed on
opencode351
github-copilot340
gemini-cli336
codex336
amp314
kimi-cli307
Vue 3 调试指南:解决响应式、计算属性与监听器常见错误
9,900 周安装
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