2026年9月 - 中文

组件现在从 cn 包导入 cn。一个依赖替代了原来的两个，也不再需要维护本地工具函数。

所有 shadcn 组件现在都从 cn 包导入 cn。

多年来，每个 shadcn 项目的 lib/utils.ts 都是这样开头的五行代码：导入 clsx，导入 twMerge，把一个包在另一个里面，再导出为 cn。这没什么问题，但意味着两个依赖，以及一段你得复制到每个项目、每个 registry 的辅助代码。

现在我们把它做成了一个包。cn 是 twMerge(clsx(...)) 的直接替代品。它更小、更快，API 完全一致，调用处无需任何改动。

Copyimport { cn } from "cn"
 
;<div className={cn("flex items-center", className)} />

有哪些变化#

• Registry 中的组件、blocks 和示例改为从 cn 包导入 cn，而不是 @/lib/utils。
• npx shadcn init 会安装 cn，并生成一行代码的 lib/utils.ts。
• 每个使用 cn 的 registry 条目都把它声明为依赖，因此在旧项目中执行 npx shadcn add 时也会自动安装。

lib/utils.ts#

utils 这个 registry 条目仍然保留，只是改为重新导出 cn，这样你自己的代码不受影响，项目级的辅助函数也依然有一个统一的存放位置。

Copyexport { cn } from "cn"

现有项目#

一切照常运行。你的 lib/utils.ts 继续有效，新组件会把 cn 安装到旁边。如果想把整个项目迁移过去并移除 clsx 和 tailwind-merge，运行以下迁移命令：

pnpmnpmyarnbun
pnpm dlx shadcn@latest migrate cn
Copy

它会重写导入语句、替换 twMerge(clsx(...)) 调用，并在旧包不再被引用时将其移除。详情见 CLI 文档。

本页内容