2024年8月 - npx shadcn init

新的 CLI 现已发布。这是一次完全重写，带来了许多新功能和改进。你现在可以使用 npx shadcn add 来安装组件、主题、hooks、工具函数等。

这是朝着分发你和你的大型语言模型（LLMs）都能访问和使用的代码迈出的重要一步。

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

你可以今天就试用新的 CLI。

pnpmnpmyarnbun
pnpm dlx shadcn init sidebar-01 login-01
Copy

更新你的项目#

要将现有项目升级到新 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"
  }
}

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