112k
新建

Monorepo

PreviousNext

在 monorepo 中使用 shadcn/ui 组件和 CLI。

到目前为止，在 monorepo 中使用 shadcn/ui 多少有点麻烦。你可以通过 CLI 添加组件，但需要自己管理组件的安装位置，并手动修正导入路径。

借助 CLI 新增的 monorepo 支持，在 monorepo 中使用 shadcn/ui 已经容易很多了。

CLI 现在能够理解 monorepo 结构，并把组件、依赖和注册库依赖安装到正确路径，同时替你处理导入。

开始使用

创建新的 monorepo 项目

要创建新的 monorepo 项目，请在 init 命令中使用 --monorepo 标志。

pnpm dlx shadcn@latest init --monorepo

然后选择你想使用的模板。

? Select a template ›
❯   Next.js
    Vite
    TanStack Start
    React Router
    Astro

这会创建一个带有两个工作区：web 和 ui 的新 monorepo 项目，并使用 Turborepo 作为构建系统。

一切都会为你配置好，因此你可以直接开始向项目中添加组件。

向项目添加组件

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

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

CLI 会判断你正在添加什么类型的组件，并把正确的文件安装到正确的路径中。

例如，如果你运行 npx shadcn@latest add button，CLI 会把按钮组件安装到 packages/ui 下，并更新 apps/web 中组件的导入路径。

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

导入组件

You can import components from the @workspace/ui package as follows:

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

You can also import hooks and utilities from the @workspace/ui package.

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

文件结构

当你创建一个新的 monorepo 项目时，CLI 会创建如下文件结构：

apps
└── web         # 你的应用放在这里。
  ├── app
  │   └── page.tsx
  ├── components
  │   └── login-form.tsx
  ├── components.json
  └── package.json
packages
└── ui          # 你的组件和依赖会安装在这里。
  ├── 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.com/schema.json",
  "style": "radix-nova",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "../../packages/ui/src/styles/globals.css",
    "baseColor": "neutral",
    "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.com/schema.json",
  "style": "radix-nova",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "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 组件、blocks、libs 和 hooks 安装到正确路径，并替你处理导入。