89.1k

单体仓库

上一页下一页

在单体仓库中使用 shadcn/ui 组件和 CLI。

直到现在，在单体仓库中使用 shadcn/ui 仍然有点麻烦。你可以使用 CLI 添加组件，但必须手动管理组件的安装位置并修复导入路径。

随着 CLI 对单体仓库的新支持，我们大大简化了在单体仓库中使用 shadcn/ui 的过程。

CLI 现在能够理解单体仓库结构，并将组件、依赖项和注册表依赖项安装到正确的路径，并为您处理导入问题。

开始

创建新的单体仓库项目

要创建新的单体仓库项目，请运行 init 命令。系统将提示您选择要创建的项目类型。

pnpm dlx shadcn@canary init

选择 Next.js (Monorepo) 选项。

? Would you like to start a new project?
    Next.js
❯   Next.js (Monorepo)

这将创建一个新的单体仓库项目，包含两个工作区：web 和 ui，并使用 Turborepo 作为构建系统。

一切都已为您设置妥当，您可以开始向项目添加组件了。

注意：此单体仓库使用 React 19 和 Tailwind CSS v4。

向您的项目添加组件

要向您的项目添加组件，请在您的应用路径中运行 add 命令。

cd apps/web
pnpm dlx shadcn@canary add [COMPONENT]

CLI 将识别您要添加的组件类型，并将其正确的文件安装到正确的路径。

例如，如果您运行 npx shadcn@canary add button，CLI 将把 `button` 组件安装在 packages/ui 下，并更新 apps/web 中组件的导入路径。

如果您运行 npx shadcn@canary add login-01，CLI 将把 button、label、input 和 card 组件安装在 packages/ui 下，并将 login-form 组件安装在 apps/web/components 下。

导入组件

您可以从 @workspace/ui 包中导入组件，如下所示

import { Button } from "@workspace/ui/components/button"

您还可以从 @workspace/ui 包中导入 hooks 和工具函数。

import { useTheme } from "@workspace/ui/hooks/use-theme"
import { cn } from "@workspace/ui/lib/utils"

文件结构

当您创建一个新的单体仓库项目时，CLI 将创建以下文件结构

apps
└── web         # Your app goes here.
    ├── app
    │   └── page.tsx
    ├── components
    │   └── login-form.tsx
    ├── components.json
    └── package.json
packages
└── ui          # Your components and dependencies are installed here.
    ├── src
    │   ├── components
    │   │   └── button.tsx
    │   ├── hooks
    │   ├── lib
    │   │   └── utils.ts
    │   └── styles
    │       └── globals.css
    ├── components.json
    └── package.json
package.json
turbo.json

要求

  1. 每个工作区都必须有一个 components.json 文件。 package.json 文件告诉 npm 如何安装依赖项。 components.json 文件告诉 CLI 如何以及在哪里安装组件。

  2. components.json 文件必须正确定义工作区的别名。这告诉 CLI 如何导入组件、hooks、工具函数等。

apps/web/components.json
{
  "$schema": "https://ui.shadcn.org.cn/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "../../packages/ui/src/styles/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "hooks": "@/hooks",
    "lib": "@/lib",
    "utils": "@workspace/ui/lib/utils",
    "ui": "@workspace/ui/components"
  }
}
packages/ui/components.json
{
  "$schema": "https://ui.shadcn.org.cn/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@workspace/ui/components",
    "utils": "@workspace/ui/lib/utils",
    "hooks": "@workspace/ui/hooks",
    "lib": "@workspace/ui/lib",
    "ui": "@workspace/ui/components"
  }
}

  1. 请确保两个 components.json 文件中具有相同的 style、iconLibrary 和 baseColor 配置。

  2. 对于 Tailwind CSS v4，请将 components.json 文件中的 tailwind 配置留空。

遵循这些要求，CLI 将能够将 UI 组件、区块、库和 hooks 安装到正确的路径，并为您处理导入问题。

CLI在 v0 中打开