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 的登录页面

pnpmnpmyarnbun
pnpm dlx skills add shadcn/ui
Copy

介绍 --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.

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --preset a1Dg5eFl
Copy

使用它从自定义配置搭建项目，与团队共享或发布到你的注册表。在提示中使用它，让你的代理知道从哪里开始。在 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.

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --preset ad3qkJ7
Copy

技能 + 预设

🌐 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.

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

更新原语

🌐 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".

pnpmnpmyarnbun
pnpm dlx shadcn@latest add button --diff
Copy

shadcn 初始化 --模板

🌐 shadcn init --template

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

pnpmnpmyarnbun
pnpm dlx shadcn@latest init

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

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

🌐 Use --monorepo to set up a monorepo.

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

shadcn 初始化 --base

🌐 shadcn init --base

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

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

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --base radix
Copy

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.

pnpmnpmyarnbun
pnpm dlx shadcn@latest info
Copy

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.

pnpmnpmyarnbun
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
Copy

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

🌐 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.

Copy{
  "$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"]
  }
}

pnpmnpmyarnbun
pnpm dlx shadcn@latest add font-inter
Copy

链接

🌐 Links

• shadcn/skills
• shadcn/create
• shadcn/cli
• shadcn/registry