变更日志

最新更新和公告。

February 2025 - Reka UI & npx shadcn-vue@latest init ​

我们已更新最新注册表，以支持 Reka UI 而非 Radix Vue。

更新后的 CLI 现已可用。您现在可以使用 npx shadcn-vue add 安装组件、主题、可组合对象、工具函数等。

这是向着让您及您的大型语言模型可获取并使用代码的方向迈进的一大步。

  1. 首先，当您在新应用中初始化时，我们会更新您现有的 Tailwind 文件，而不是覆盖。
  2. 组件现在会附带自己的依赖。例如，手风琴组件可以定义自己的 Tailwind 动画。将其添加到项目后，我们会相应地更新您的 tailwind.config.ts 文件。
  3. 您也可以使用 URL 安装远程组件，例如 npx shadcn-vue add https://acme.com/registry/navbar.json。
  4. 我们创建了新的 schema，供您发布自己的组件注册表。由于它支持 URL，您甚至可以用它来发布私有组件。
  5. 以及其他更新，如改进错误处理和 monorepo 支持。

您可以立即尝试新的 CLI。

pnpm dlx shadcn-vue@latest init Sidebar01 Login01

Update Your Project ​

Update components.json ​

要更新现有项目以使用新的 CLI，请在 components.json 文件中添加 components、utils、ui、lib 和 composables 的导入别名。

components.json
json
{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "new-york",
  "tailwind": {
    // ...
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "composables": "@/composables"
  }
}

如果您使用不同的导入别名前缀，例如 ~，请将 @ 替换为您的前缀。

Run add components ​

为了轻松完成从 Radix Vue 到 Reka UI 的迁移，您可以对所有现有组件运行 add 命令。

pnpm dlx shadcn-vue@latest add <components>

如果您使用自定义组件，需要手动迁移它们 手动迁移指南。

June 2024 ​

New Component - Number Field ​

已在项目中添加一个新组件 NumberField。

数值输入框允许用户输入数值，并通过加减按钮进行递增或递减。

May 2024 ​

New Component - Charts ​

项目中已添加多种图表组件。
图表是多功能的可视化工具，允许用户使用多种选项来表示数据以进行有效分析。

  1. Area Chart - 区域图可视化地展示随时间变化的数据，通过在折线图下方填充区域来呈现趋势和模式。
  1. Bar Chart - 柱形图可视化地展示数据，使用不同长度的矩形条比较不同类别或组之间的数量。
  1. Donut Chart - 环形图可视化地展示数据，类似饼图但中间为空白，突出各类别内的比例。
  1. Line Chart - 折线图可视化地展示数据点，通过直线连接，显示连续轴上的趋势或关系。

New Component - Auto Form ​

Auto Form 是一个即插即用的表单生成器，适用于带有现有 Zod 架构的内部或低优先级表单。
例如，如果您已为 API 设定 Zod 架构，并想创建一个简单的管理员面板来编辑用户资料，只需将架构传递给 AutoForm，即可完成。
以下表单是通过向我们的 AutoForm 组件传入 zod 架构对象创建的。

Your favourite number between 1 and 10.

I agree to the .

We need your birthday to send you a gift.

April 2024 ​

Component Updated - Calendar ​

Calendar 组件已更新，现已基于 Reka UI Calendar 组件构建，该组件使用@internationalized/date 包来处理日期。
如果您需要范围日历，请查看 Range Calendar 组件。
如果您需要日期选择器输入，请查看 Date Picker 组件。

October 2025
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Event Date, October 2025
Event Date, October 2025
October 2025
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Building Blocks for the Web ​

Blocks 是由不同组件组成，可用于构建您的应用，每个块都是应用的独立部分。这些块完全响应式、无障碍且可组合，并且采用与 shadcn-vue 中其他组件相同的原则构建。

March 2024 ​

New Component - Breadcrumb ​

Breadcrumb 显示当前资源路径，使用层级链接。

New Component - Pin Input (OTP Input) ​

Pin Input 允许用户输入一串单字符字母数字。

New Component - Resizable ​

Resizable - 支持键盘的可调整大小面板组和布局。

One
Two
Three

New Component - Drawer ​

Drawer 组件为 Vue 设计，基于 Vaul Vue 构建。

February 2024 ​

New Component - Tag Inputs ​

Tag inputs 在输入框内呈现标签，随后是实际的文本输入框。

Apple
Banana

January 2024 ​

New Component - Sonner ​

Sonner 是 Vue 的吐司组件，带有明确的样式。Sonner 组件由 vue-sonner 提供，是 Sonner 的 Vue 移植版，最初由Emil Kowalski 为 React 创建。

New Component - Toggle Group ​

Toggle Group 是一组可切换的双状态按钮。

Carousel 是使用 Embla 库构建的带动画和滑动功能的轮播图。

1
2
3
4
5
Edit this page on GitHub