2024 年 8 月 - npx shadcn init

新的 CLI 现已可用。这是一次彻底重写，带来了大量新功能和改进。现在你可以使用 npx shadcn add 安装组件、主题、hooks、utils 等内容。

这意味着我们在分发你和你的 LLM 都可以访问和使用的代码方面迈出了重要一步。

1. 首先，CLI 现在开箱即支持所有主流 React 框架：Next.js、Remix、Vite 和 Laravel。并且当你初始化一个新应用时，我们会更新你现有的 Tailwind 文件，而不是直接覆盖。
2. 组件现在会自带自己的依赖。以 accordion 为例，它可以定义自己的 Tailwind keyframes。当你把它添加到项目中时，我们会相应更新 tailwind.config.ts 文件。
3. 你也可以使用 URL 安装远程组件。npx shadcn add https://acme.com/registry/navbar.json。
4. 我们还改进了 init 命令。它会进行框架检测，甚至可以在一条命令中初始化一个全新的 Next.js 应用。npx shadcn init。
5. 我们创建了一个新的 schema，可用于发布你自己的组件 registry。由于它支持 URL，你甚至可以用它来分发私有组件。
6. 另外还有一些更新，比如更好的错误处理和 monorepo 支持。

你今天就可以试试这个新的 CLI。

pnpmnpmyarnbun
pnpm dlx shadcn init sidebar-01 login-01
复制

更新你的项目

要把现有项目更新为使用新的 CLI，请更新你的 components.json 文件，加入 components、utils、ui、lib 和 hooks 的导入别名。

Copy{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "tailwind": {
    // ...
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

如果你使用的是不同的导入别名前缀，例如 ~，请把 @ 替换成你的前缀。