111k
新建

2026 年 3 月 - shadcn/cli v4

更强大、更易用。为你和你的编码代理打造。包含 skills、预设、dry run、新模板、monorepo 等内容。

我们发布了 shadcn/cli 第 4 版。它更强大、更易用，专为你和你的编码代理打造。下面是全部新内容。

shadcn/skills

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.

你可以让你的代理执行类似这样的任务：

  • "create a new vite monorepo"
  • "find me a hero from tailark, add it to the homepage, animate the text using an animation from react-bits"
  • "install and configure a sign in page from @clerk"
pnpm dlx skills add shadcn/ui

引入 --preset

预设会把你整个设计系统配置打包成一个短代码。颜色、主题、图标库、字体、圆角，一串字符串全部包含。

在 shadcn/create 中构建你的预设，实时预览，准备好后复制代码即可。

pnpm dlx shadcn@latest init --preset a1Dg5eFl

你可以用它从自定义配置脚手架项目、与团队共享，或者发布到你的 registry 中。把它放进提示词里，让你的代理知道从哪里开始。它也可以在 Claude、Codex、v0、Replit 之间通用。

切换预设

当你在处理新应用时，可能需要试几次才能找到喜欢的方案，所以我们把切换预设做得非常简单。只需在应用中运行 init --preset，CLI 就会帮你重新配置一切，包括组件。

pnpm dlx shadcn@latest init --preset ad3qkJ7

Skills + 预设

你的代理知道如何使用预设。你可以脚手架项目、切换设计系统、尝试新方案。

  • "create a new next app using --preset adtk27v"
  • "let's try --preset adtk27v"

全新的 shadcn/create

为了帮助你构建自定义预设，我们重建了 shadcn/create。它现在包含一个 UI 组件库，可用于预览你的预设。在开始构建之前，就能看到颜色、字体和圆角如何作用于真实组件。

新增 --dry-run、--diff 和 --view 参数

在任何内容写入之前，先检查 registry 会向你的项目添加什么。你可以自己查看负载，也可以把它传给编码代理再检查一次。

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

更新 primitives

你可以使用 --diff 参数检查 registry 更新。或者让你的代理执行：“检查 @shadcn 的更新并与我的本地修改合并”。

pnpm dlx shadcn@latest add button --diff

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

Use --monorepo to set up a monorepo.

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

shadcn init --base

选择你的 primitives。使用 --base 即可用 Radix 或 Base UI 启动项目。

pnpm dlx shadcn@latest init --base radix

shadcn info

info 命令现在会显示完整信息：框架、版本、CSS 变量、已安装哪些组件，以及每个组件的文档和示例在哪里。它非常适合为编码代理提供处理项目所需的上下文。

pnpm dlx shadcn@latest info

shadcn docs

直接从 CLI 获取任意 UI 组件的文档、代码和示例。它会给你的编码代理提供正确使用 primitives 所需的上下文。

pnpm dlx shadcn@latest docs combobox

combobox
  - docs      https://ui.shadcn.com/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 和 registry:font

Registries 现在可以使用 registry:base 以单个载荷分发整个设计系统。组件、依赖、CSS 变量、字体、配置，一次安装全部就绪。

字体现在是一级 registry 类型。安装和配置字体的方式与安装组件相同。

font-inter.json
{
  "$schema": "https://ui.shadcn.com/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

链接