SuperAPI AI 工具集

shadcn-vue

前端与建站

查看项目

更新于 10-15 23:45

技能介绍

用途:shadcn-vue 为 Vue/Nuxt 项目提供可访问的 UI 组件,底层使用 Reka UI 组件与 Tailwind 样式,适合构建表单、数据表格、图表、导航与暗色模式等界面。

主要能力:通过 CLI 初始化项目、添加单个或多个组件、检查组件更新、构建 registry JSON、生成组件文档,并可为 opencode、Codex、Cursor、VS Code 初始化 MCP 服务器。组件文档覆盖 50+ 组件示例,另提供错误目录、主题、暗色模式、数据表格(TanStack Table)等参考。

使用方式:先运行 npx shadcn-vue@latest init 初始化,初始化时选择 Style(New York 或 Default,之后不可更改)、基础色(推荐 Slate)并启用 CSS 变量(暗色模式必需)。随后配置 TypeScript 路径别名(@/* 指向 ./src/*)与 Vite(含 @tailwindcss/vite 与 @ 别名)。添加组件用 npx shadcn-vue@latest add button,可一次添加多个或使用 --all。MCP 初始化示例:npx shadcn-vue@latest mcp init --client opencode。配置集中在 components.json,需纳入版本控制。

适用场景:Vue 3 + Vite、Nuxt、Astro 项目中的可访问 UI 开发,表单、表格、图表、主题切换与 MCP 集成。

限制:初始化后不能更改 Style,需重新初始化;不要混用 Radix Vue 与 Reka UI v2;必须配置 TypeScript 路径别名;必须使用 Tailwind CSS;启用 CSS 变量类需 tailwind.cssVariables 为 true。常见错误包括未 init 就 add、未在客户端启用 MCP、registry 命名空间拼写错误。官方文档见 https://shadcn-vue.com,Reka UI 见 https://reka-ui.com,GitHub 见 https://github.com/radix-vue/shadcn-vue。