2026年9月 - cn

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

多年来，每个 shadcn 项目都会在 lib/utils.ts 中以相同的五行代码开始：导入 clsx 和 twMerge，将它们组合起来，再导出为 cn。这种方式可行，但需要两个依赖项，还得将辅助函数复制到每个项目和每个注册表中。

我们已将这部分功能移入独立软件包。cn 可直接替代 twMerge(clsx(...))。它更小、速度更快，并提供相同的 API，因此调用处无需更改。

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

变更内容#

• 注册表组件、区块和示例现在从 cn 导入 cn，而不是从 @/lib/utils 导入。
• npx shadcn init 会安装 cn，并生成只有一行内容的 lib/utils.ts。
• 每个使用 cn 的注册表项都会将其声明为依赖项，因此 npx shadcn add 也会在本次变更之前创建的项目中安装它。

lib/utils.ts#

utils 注册表项仍然存在。它现在会重新导出 cn，让你自己的代码继续正常工作，同时仍为项目辅助函数保留统一入口。

Copyexport { cn } from "cn"

现有项目#

现有功能不会受影响。你的 lib/utils.ts 会继续工作，新组件会在其旁边安装 cn。如需迁移项目的其余部分并移除 clsx 和 tailwind-merge，请运行以下迁移：

pnpmnpmyarnbun
pnpm dlx shadcn@latest migrate cn
Copy

该迁移会重写导入，将 twMerge(clsx(...)) 调用替换为 cn(...)，并在旧软件包不再被引用时将其移除。详情请参阅 CLI 文档。