shadcn-vue-skilld

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

unovue/shadcn-vue

shadcn-vue

unovue/shadcn-vue

shadcn-vue

Add components to your apps.

Version: 2.4.3 (Dec 2025) 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 (Feb 2025), latest: 2.4.3 (Dec 2025)

References: Docs — API reference, guides

为你的应用添加组件。

版本： 2.4.3（2025年12月） 依赖： @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（2025年2月）, latest: 2.4.3（2025年12月）

参考文档： 文档 — API参考、指南

API Changes

API变更

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

本节记录特定版本的API变更——优先关注近期的大版本/小版本更新。

重大变更：移除
```
Separator
```
的label属性——自v2.2.0版本起，Tailwind v3配置中不再支持
```
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

图标支持

Best Practices

最佳实践

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
```
VeeValidate
```
or
```
TanStack Form
```
integrations for more robust, actively maintained form handling and validation patterns source
Utilize 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

主题定制优先使用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
```
Schema创建并共享你自己的自定义组件注册表，供内部或社区使用来源 ",