重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
shadcn-vue-skilld by harlan-zw/vue-ecosystem-skills
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill shadcn-vue-skilldshadcn-vue向您的应用添加组件。
版本: 2.4.3 依赖: @dotenvx/dotenvx@^1.51.1, @modelcontextprotocol/sdk@^1.24.3, @unovue/detypes@^0.8.5, @vue/compiler-sfc@^3.5, c12@^3.3.2, commander@^14.0.2, consola@^3.4.2, dedent@^1.7.0, deepmerge@^4.3.1, diff@^8.0.2, fs-extra@^11.3.2, fuzzysort@^3.1.0, get-tsconfig@^4.13.0, magic-string@^0.30.21, nypm@^0.6.2, ofetch@^1.5.1, ora@^9.0.0, pathe@^2.0.3, postcss@^8.5.6, prompts@^2.4.2, reka-ui@^2.6.1, semver@^7.7.3, stringify-object@^6.0.0, tailwindcss@^4.1.17, tinyexec@^1.0.2, tinyglobby@^0.2.15, ts-morph@^27.0.2, undici@^7.16.0, vue-metamorph@^3.3.3, zod@^3.25.76, zod-to-json-schema@^3.25.0 标签: radix: 0.11.4, latest: 2.4.3
参考: 文档 — API 参考、指南 • GitHub Issues — 错误、变通方案、边界情况 • GitHub Discussions — 问答、模式、示例 • 发布日志 — 更新日志、破坏性变更、新 API
本节记录了特定版本的 API 变更 — 请优先关注近期的主要/次要版本发布。
破坏性变更: Separator 标签属性移除 — 自 v2.2.0 起,在 Tailwind v3 配置中不再支持 中的标签
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
Separator破坏性变更: vue-sonner v2 更新 — 需要手动更新 Toaster 组件以兼容最新版本 来源
破坏性变更: HSL 颜色转换为 OKLCH — 在 v2.0.0 中默认色彩空间更改为 OKLCH,影响了自定义 CSS 变量逻辑 来源
破坏性变更: NavigationMenuLink 状态变更 — 现在使用 data-active 替代之前的状态指示器,以匹配 reka-ui 来源
破坏性变更: Chart showGradient 属性 — 在 v2.3.0 中修正了属性名拼写错误,从 showGradiant 改为 showGradient 来源
已弃用: toast 组件 — 官方已弃用,推荐使用 sonner;当前的 toast 实现应进行迁移 来源
已弃用: default 样式 — 在 v2.0.0 中已逐步淘汰;新项目默认使用 new-york 样式初始化 来源
新增: Tailwind v4 支持 — 引入了与 Tailwind v4 引擎和 @theme 指令的完全集成 来源
新增: NativeSelect modelValue — 为 NativeSelect 组件提供原生的 v-model 支持 来源
新增: Kbd 组件 — 用于快捷键和 UI 文档的键盘按键显示组件 来源
新增: Button-group 组件 — 新的布局组件,专门用于分组相关的按钮操作 来源
新增: Spinner 组件 — 向注册表添加了专用的加载旋转器组件 来源
新增: PinInput 泛型类型 — 增强了 PinInput 的类型安全性,允许自定义值类型 来源
新增: data-slot 属性 — 添加到所有基础组件中,以简化复杂组件中的细粒度样式设置 来源
其他变更: Stepper 插槽属性绑定修复 · Sidebar cookie 状态 · size-* 工具类支持 · phosphor 和 tabler 图标支持
主题化时,优先使用 CSS 变量而非工具类,以便实现动态运行时调整并更易于维护复杂的配色方案 来源
在工具类中使用变量表示背景颜色时,省略 background 后缀;例如,bg-primary 会自动映射到 --primary 变量 来源
通过组合子组件(SidebarProvider、SidebarContent、SidebarGroup 等)来构建侧边栏,而不是使用单个庞大的组件,以保持灵活性和可定制性 来源
避免使用遗留的 Form 组件;使用 VeeValidate 或 TanStack Form 集成,以获得更健壮、积极维护的表单处理和验证模式 来源
在 Vue 中管理 TanStack Table 状态时,使用 valueUpdater 辅助函数,以正确处理直接值赋值和函数式状态转换 来源
export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) { ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue }
通过向 SidebarProvider 组件提供 storageKey 属性,启用跨页面重新加载的侧边栏状态自动持久化 来源
利用 SidebarProvider 提供的默认 cmd+b 或 ctrl+b 键盘快捷键来切换侧边栏可见性,无需手动添加事件监听器 来源
将 Sidebar*.vue(以及其他添加的 UI 组件)中的代码视为您自己的项目代码;明确鼓励您修改源代码以满足特定的设计需求 来源
使用无头基础组件和基本的 <Table /> 组件构建自定义数据表格,而不是寻找一个预构建的、配置繁重的 "DataTable" 组件 来源
(实验性)使用 build 命令和 registry.json 模式来创建和分享您自己的自定义组件注册表,供内部或社区使用 来源
每周安装量
72
代码仓库
GitHub 星标数
148
首次出现
2026年2月19日
安全审计
安装于
github-copilot59
opencode57
codex57
gemini-cli55
amp55
kimi-cli55
shadcn-vueAdd components to your apps.
Version: 2.4.3 Deps: @dotenvx/dotenvx@^1.51.1, @modelcontextprotocol/sdk@^1.24.3, @unovue/detypes@^0.8.5, @vue/compiler-sfc@^3.5, c12@^3.3.2, commander@^14.0.2, consola@^3.4.2, dedent@^1.7.0, deepmerge@^4.3.1, diff@^8.0.2, fs-extra@^11.3.2, fuzzysort@^3.1.0, get-tsconfig@^4.13.0, magic-string@^0.30.21, nypm@^0.6.2, ofetch@^1.5.1, ora@^9.0.0, pathe@^2.0.3, postcss@^8.5.6, prompts@^2.4.2, reka-ui@^2.6.1, semver@^7.7.3, stringify-object@^6.0.0, tailwindcss@^4.1.17, tinyexec@^1.0.2, tinyglobby@^0.2.15, ts-morph@^27.0.2, undici@^7.16.0, vue-metamorph@^3.3.3, zod@^3.25.76, zod-to-json-schema@^3.25.0 Tags: radix: 0.11.4, latest: 2.4.3
References: Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs
This section documents version-specific API changes — prioritize recent major/minor releases.
BREAKING: Separator label props removed — labels in Separator are no longer supported in Tailwind v3 configurations since v2.2.0 source
BREAKING: vue-sonner v2 update — requires manual update of Toaster component for compatibility with the latest version source
BREAKING: HSL colors converted to OKLCH — default color space changed to OKLCH in v2.0.0, affecting custom CSS variable logic source
BREAKING: NavigationMenuLink state change — now uses data-active instead of previous state indicators to match reka-ui source
BREAKING: Chart showGradient prop — corrected typo in prop name from showGradiant to showGradient in v2.3.0 source
DEPRECATED: toast component — officially deprecated in favor of sonner; current toast implementations should be migrated source
DEPRECATED: default style — phased out in v2.0.0; new projects are initialized with new-york by default source
NEW: Tailwind v4 support — introduces full integration with the Tailwind v4 engine and @theme directive source
NEW: NativeSelect modelValue — provides native v-model support for the NativeSelect component source
NEW: Kbd component — keyboard key display component for shortcuts and UI documentation source
NEW: Button-group component — new layout component specifically for grouping related button actions source
NEW: Spinner component — added dedicated loading spinner component to the registry source
NEW: PinInput generic types — enhanced type safety for PinInput allowing custom value types source
NEW: data-slot attributes — added to all primitives to simplify granular styling in complex components source
Also changed: Stepper slot props binding fix · Sidebar cookie state · size-* utility support · phosphor and tabler icon support
Prefer CSS variables over utility classes for theming to enable dynamic runtime adjustments and easier maintenance of complex color schemes source
Omit the background suffix when using variables for background colors in utility classes; for example, bg-primary automatically maps to the --primary variable source
Build sidebars by composing sub-components (SidebarProvider, SidebarContent, SidebarGroup, etc.) rather than a single monolithic component to maintain flexibility and customization source
Avoid the legacy Form component; use or integrations for more robust, actively maintained form handling and validation patterns
Weekly Installs
72
Repository
GitHub Stars
148
First Seen
Feb 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
github-copilot59
opencode57
codex57
gemini-cli55
amp55
kimi-cli55
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
122,000 周安装
VeeValidateTanStack FormUtilize the valueUpdater helper when managing TanStack Table state in Vue to correctly handle both direct value assignments and functional state transformations source
export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) { ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue }
Enable automatic sidebar state persistence across page reloads by providing a storageKey prop to the SidebarProvider component source
Leverage the default cmd+b or ctrl+b keyboard shortcuts provided by SidebarProvider to toggle sidebar visibility without manual event listeners source
Treat the code in Sidebar*.vue (and other added UI components) as your own project code; you are explicitly encouraged to modify the source to suit specific design needs source
Build custom data tables from headless primitives and the basic <Table /> component instead of looking for a pre-built, configuration-heavy "DataTable" component source
(experimental) Use the build command and registry.json schema to create and share your own custom component registries for internal or community use source