🌐 Nodejs.cn

Changelog

RSS

Latest updates and announcements.

2026年3月 - shadcn/cli v4

我们正在发布 shadcn/cli 的第 4 版。功能更强大,更易使用。为你和你的编码代理而打造。以下是所有新的功能。

🌐 We're releasing version 4 of shadcn/cli. More capable, easier to use. Built for you and your coding agents. Here's everything new.

shadcn/skills

shadcn/skills 为编码代理提供了正确使用你的组件和注册表所需的上下文。它涵盖了 Radix 和 Base UI 原语、更新后的 API、组件模式和注册表工作流。该技能还知道如何使用 shadcn CLI、何时调用以及传递哪些标志。代理出错更少,并生成实际上符合你的设计系统的代码。

🌐 shadcn/skills gives coding agents the context they need to work with your components and registry correctly. It covers both Radix and Base UI primitives, updated APIs, component patterns and registry workflows. The skill also knows how to use the shadcn CLI, when to invoke it and which flags to pass. Agents make fewer mistakes and produce code that actually matches your design system.

你可以问你的代理一些事情,例如:

🌐 You can ask your agent things like:

  • 创建一个新的 Vite 单体仓库
  • 从 Tailark 找一个英雄,把它添加到首页,使用 react-bits 的动画给文字添加动画效果
  • 安装并配置来自 @clerk 的登录页面
pnpm dlx skills add shadcn/ui

介绍 --preset

🌐 Introducing --preset

预设将你整个设计系统配置打包成一个短代码。颜色、主题、图标库、字体、圆角。一个字符串,包含所有内容。

🌐 A preset packs your entire design system config into a short code. Colors, theme, icon library, fonts, radius. One string, everything included.

shadcn/create 上构建你的预设,实时预览,并在准备好时获取代码。

🌐 Build your preset on shadcn/create, preview it live and grab the code when you're ready.

pnpm dlx shadcn@latest init --preset a1Dg5eFl

使用它从自定义配置搭建项目,与团队共享或发布到你的注册表。在提示中使用它,让你的代理知道从哪里开始。在 Claude、Codex、v0、Replit 上使用它。随身携带你的预设。

🌐 Use it to scaffold projects from custom config, share with your team or publish in your registry. Drop it in prompts so your agent knows where to start. Use it across Claude, Codex, v0, Replit. Take your preset with you.

切换预设

🌐 Switching presets

当你在开发一个新应用时,可能需要尝试几次才能找到你喜欢的内容,所以我们让切换预设变得非常简单。在你的应用中运行 init --preset,CLI 会负责重新配置所有内容,包括你的组件。

🌐 When you're working on a new app, it can take a few tries to find something you like so we've made switching presets really easy. Run init --preset in your app, and the cli will take care of reconfiguring everything including your components.

pnpm dlx shadcn@latest init --preset ad3qkJ7

技能 + 预设

🌐 Skills + Presets

你的代理知道如何使用预设。搭建一个项目,切换设计系统,尝试一些新东西。

🌐 Your agent knows how to use presets. Scaffold a project, switch design systems, try something new.

  • 使用 --preset adtk27v 创建一个新的 next 应用
  • 让我们试试 --preset adtk27v

新的 shadcn/create

🌐 New shadcn/create

为了帮助你创建自定义预设,我们重建了 shadcn/create。它现在包括一个 UI 组件库,你可以用来预览你的预设。在开始构建之前,先看看你的颜色、字体和圆角如何应用到实际组件上。

🌐 To help you build custom presets, we rebuilt shadcn/create. It now includes a library of UI components you can use to preview your presets. See how your colors, fonts and radius apply to real components before you start building.

新增 --dry-run、--diff 和 --view 标志

🌐 New --dry-run, --diff, and --view flags

在任何内容被写入之前,检查注册表将向你的项目添加的内容。自行审查有效负载,或将其传送给你的编码代理进行二次检查。

🌐 Inspect what a registry will add to your project before anything gets written. Review the payload yourself or pipe it to your coding agent for a second look.

pnpm dlx shadcn@latest add button --dry-run
npx shadcn@latest add button --diff
npx shadcn@latest add button --view

更新原语

🌐 Updating primitives

你可以使用 --diff 标志来检查注册表更新。或者询问你的代理:"从 @shadcn 检查更新并与我的本地更改合并"。

🌐 You can use the --diff flag to check for registry updates. Or ask your agent: "check for updates from @shadcn and merge with my local changes".

pnpm dlx shadcn@latest add button --diff

shadcn 初始化 --模板

🌐 shadcn init --template

shadcn init 现在为 Next.js、Vite、Laravel、React Router、Astro 和 TanStack Start 提供完整的项目模板搭建。Next.js 和 Vite 包含夜间模式。

pnpm dlx shadcn@latest init

Select a template › - Use arrow-keys. Return to submit.
❯ Next.js
  Vite
  TanStack Start
  React Router
  Astro
  Laravel

使用 --monorepo 来设置一个多仓库项目。

🌐 Use --monorepo to set up a monorepo.

pnpm dlx shadcn@latest init -t next --monorepo

shadcn 初始化 --base

🌐 shadcn init --base

选择你的原语。使用 --base 来启动一个 Radix 或 Base UI 项目。

🌐 Pick your primitives. Use --base to start a project with Radix or Base UI.

pnpm dlx shadcn@latest init --base radix

shadcn 信息

🌐 shadcn info

info 命令现在显示完整信息:框架、版本、CSS 变量、已安装的组件,以及每个组件的文档和示例位置。非常适合为编码代理提供操作你项目所需的上下文。

🌐 The info command now shows the full picture: framework, version, CSS vars, which components are installed, and where to find docs and examples for every component. Great for giving coding agents the context they need to work with your project.

pnpm dlx shadcn@latest info

shadcn 文档

🌐 shadcn docs

直接从命令行获取任何 UI 组件的文档、代码和示例。为你的编码代理提供使用你的原语的正确上下文。

🌐 Get docs, code and examples for any UI component right from the CLI. Gives your coding agent the context to use your primitives correctly.

pnpm dlx shadcn@latest docs combobox

combobox
  - docs      https://shadcn.nodejs.cn/docs/components/radix/combobox
  - examples  https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx
  - api       https://base-ui.com/react/components/combobox

注册表:基础 和 注册表:字体

🌐 registry:base and registry:font

现在注册表可以使用 registry:base 将整个设计系统作为单个有效负载分发。组件、依赖、CSS 变量、字体、配置。一次安装,一切设置就绪。

🌐 Registries can now distribute an entire design system as a single payload using registry:base. Components, dependencies, CSS vars, fonts, config. One install, everything set up.

字体现在是一等注册类型。安装和配置它们的方式与安装组件相同。

🌐 Fonts are now a first-class registry type. Install and configure them the same way you install components.

font-inter.json
{
  "$schema": "https://shadcn.nodejs.cn/schema/registry-item.json",
  "name": "font-inter",
  "type": "registry:font",
  "font": {
    "family": "'Inter Variable', sans-serif",
    "provider": "google",
    "import": "Inter",
    "variable": "--font-sans",
    "subsets": ["latin"]
  }
}
pnpm dlx shadcn@latest add font-inter

🌐 Links

2026年2月 - Radix和Base UI的模块

所有区块现在都可以在 Radix 和 Base UI 中使用。

🌐 All blocks are now available for both Radix and Base UI.

  • 两个库的所有模块 - 每个模块,包括登录、注册、侧边栏和仪表板模块,现在都可以在 Radix 和 Base UI 版本中使用。
  • 相同的 CLI 工作流程 - 运行 npx shadcn add,CLI 会根据你的项目配置拉取正确的区块变体。

如果你已经用 npx shadcn create 设置了你的项目,模块将自动使用你选择的库。无需额外配置。

🌐 If you've already set up your project with npx shadcn create, blocks will automatically use your chosen library. No additional configuration needed.

pnpm dlx shadcn@latest add login-01

blocks 页面浏览完整收藏。

🌐 Browse the full collection on the blocks page.

2026年2月 - 统一的Radix UI包

new-york 样式现在使用统一的 radix-ui 包,而不是单独的 @radix-ui/react-* 包。

🌐 The new-york style now uses the unified radix-ui package instead of individual @radix-ui/react-* packages.

有什么变化

🌐 What's Changed

当你使用 new-york 样式添加组件时,它们现在将从 radix-ui 导入,而不是从单独的包导入:

🌐 When you add components using the new-york style, they will now import from radix-ui instead of separate packages:

components/ui/dialog.tsx
- import * as DialogPrimitive from "@radix-ui/react-dialog"
+ import { Dialog as DialogPrimitive } from "radix-ui"

这导致一个更干净的 package.json,只有一个 radix-ui 依赖,而不是多个 @radix-ui/react-* 包。

🌐 This results in a cleaner package.json with a single radix-ui dependency instead of multiple @radix-ui/react-* packages.

迁移现有项目

🌐 Migrating Existing Projects

如果你有一个使用 new-york 风格的现有项目,你可以使用迁移命令迁移到新的 radix-ui 包:

🌐 If you have an existing project using the new-york style, you can migrate to the new radix-ui package using the migrate command:

pnpm dlx shadcn@latest migrate radix

这将更新你 UI 组件中的所有导入,并将 radix-ui 添加到你的依赖中。

🌐 This will update all imports in your UI components and add radix-ui to your dependencies.

要将组件迁移到 ui 目录之外,请使用 path 参数:

🌐 To migrate components outside of your ui directory, use the path argument:

pnpm dlx shadcn@latest migrate radix src/components/custom

完成后,你可以从你的 package.json 中删除任何未使用的 @radix-ui/react-* 包。

🌐 Once complete, you can remove any unused @radix-ui/react-* packages from your package.json.

有关更多详细信息,请参阅 migrate radix 文档

🌐 See the migrate radix documentation for more details.

2026年1月 - RTL支持

shadcn/ui现在对从右到左(RTL)布局提供一流支持。你的组件会自动适应阿拉伯语、希伯来语和波斯语等语言。

🌐 shadcn/ui now has first-class support for right-to-left (RTL) layouts. Your components automatically adapt for languages like Arabic, Hebrew, and Persian.

这适用于 shadcn/ui 组件,以及 shadcn 注册表上分发的任何组件。

"use client"

import * as React from "react"

我们对RTL的方法

🌐 Our approach to RTL

传统上,支持 RTL 的组件库自带内置的逻辑类。这意味着每个人都必须使用像 ms-4start-2 这样的类,即使他们只为 LTR 布局构建。

🌐 Traditionally, component libraries that support RTL ship with logical classes baked in. This means everyone has to work with classes like ms-4 and start-2, even if they're only building for LTR layouts.

我们采取了不同的方法。shadcn CLI 在安装时会转换类,因此只有在真正需要时你才会看到逻辑类。如果你不为 RTL 构建,你可以使用熟悉的类,如 ml-4left-2。当你启用 RTL 时,CLI 会为你处理转换。

🌐 We took a different approach. The shadcn CLI transforms classes at install time, so you only see logical classes when you actually need them. If you're not building for RTL, you work with familiar classes like ml-4 and left-2. When you enable RTL, the CLI handles the conversion for you.

你不必在需要之前学习 RTL。

它是如何运作的

🌐 How it works

当你在 components.json 中添加设置了 rtl: true 的组件时,CLI 会自动将像 ml-4text-left 这样的物理 CSS 类转换为它们的逻辑等效类,如 ms-4text-start

🌐 When you add components with rtl: true set in your components.json, the CLI automatically converts physical CSS classes like ml-4 and text-left to their logical equivalents like ms-4 and text-start.

  • left-*right-* 这样的物理定位类变成了 start-*end-*
  • ml-*pr-* 这样的 margin 和 padding 类变成了 ms-*pe-*
  • text-left 这样的文本对齐类变成 text-start
  • 方向属性已更新为使用逻辑值。
  • 支持的图标会自动使用 rtl:rotate-180 翻转。
  • slide-in-from-left 这样的动画会变成 slide-in-from-start

每个组件的RTL示例

🌐 RTL examples for every component

我们已经为每个组件添加了 RTL 示例。你可以在每个组件页面上查看实时预览和代码。

🌐 We've added RTL examples for every component. You'll find live previews and code on each component page.

تسجيل الدخول إلى حسابك
أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك
"use client"

import * as React from "react"

CLI 更新

🌐 CLI updates

新项目:使用 --rtl 标志与 initcreate 结合,从一开始就启用 RTL。

pnpm dlx shadcn@latest init --rtl
pnpm dlx shadcn@latest create --rtl

现有项目:使用 migrate rtl 命令迁移你的组件。

pnpm dlx shadcn@latest migrate rtl

这会将 ui 目录中的所有组件转换为使用逻辑类。你也可以传入特定路径或通配符模式。

🌐 This transforms all components in your ui directory to use logical classes. You can also pass a specific path or glob pattern.

试试看

🌐 Try it out

点击下面的链接以在 v0 中打开支持 RTL 的 Next.js 项目。

🌐 Click the link below to open a Next.js project with RTL support in v0.

🌐 Links

2026年1月 - 内联开始和结束样式

我们已更新基础 UI 组件的样式,以支持 inline-startinline-end 侧值。以下组件现在支持这些值:

🌐 We've updated the styles for Base UI components to support inline-start and inline-end side values. The following components now support these values:

  • 工具提示
  • 弹出窗口
  • 组合框
  • 上下文菜单
  • 下拉菜单
  • 悬停卡
  • 菜单栏
  • 选择

发生了什么变化

🌐 What Changed

我们添加了新的 Tailwind 类来处理逻辑边值:

🌐 We added new Tailwind classes to handle the logical side values:

<PopoverPrimitive.Popup
  className={cn(
    "... data-[side=bottom]:slide-in-from-top-2
    data-[side=left]:slide-in-from-right-2
    data-[side=right]:slide-in-from-left-2
    data-[side=top]:slide-in-from-bottom-2
+   data-[side=inline-start]:slide-in-from-right-2
+   data-[side=inline-end]:slide-in-from-left-2 ...",
    className
  )}
/>

用法

🌐 Usage

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent side="inline-start">
    
  </PopoverContent>
</Popover>

大型语言模型提示

🌐 LLM Prompt

让你的大语言模型通过运行以下提示来更新你的组件:

🌐 Ask your LLM to update your components by running the following prompt:

Add inline-start and inline-end support to my shadcn/ui components. Add the following Tailwind classes to each component:
 
| File | Component | Add Classes |
|------|-----------|-------------|
| tooltip.tsx | TooltipContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| tooltip.tsx | TooltipArrow | `data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2
data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2` |
| popover.tsx | PopoverContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| hover-card.tsx | HoverCardContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| select.tsx | SelectContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2
data-[align-trigger=true]:animate-none` and add `data-align-trigger={alignItemWithTrigger}` attribute |
| combobox.tsx | ComboboxContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| dropdown-menu.tsx | DropdownMenuContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| context-menu.tsx | ContextMenuContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| menubar.tsx | MenubarContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
 
Add these classes next to the existing `data-[side=top]`, `data-[side=bottom]`, `data-[side=left]`, `data-[side=right]` classes.