Docs
大仓

大仓

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

到目前为止，在 monorepo 中使用 shadcn/ui 有点麻烦。你可以使用 CLI 添加组件，但你必须管理组件的安装位置并手动修复导入路径。

¥Until now, using shadcn/ui in a monorepo was a bit of a pain. You could add components using the CLI, but you had to manage where the components were installed and manually fix import paths.

借助 CLI 中新的 monorepo 支持，我们使在 monorepo 中使用 shadcn/ui 变得更加容易。

¥With the new monorepo support in the CLI, we've made it a lot easier to use shadcn/ui in a monorepo.

CLI 现在可以理解 monorepo 结构，并将组件、依赖和注册表依赖安装到正确的路径并为你处理导入。

¥The CLI now understands the monorepo structure and will install the components, dependencies and registry dependencies to the correct paths and handle imports for you.

入门

¥Getting started

创建一个新的 monorepo 项目

¥Create a new monorepo project

要创建新的 monorepo 项目，请运行 init 命令。系统将提示你选择要创建的项目类型。

¥To create a new monorepo project, run the init command. You will be prompted to select the type of project you are creating.

pnpm dlx shadcn@canary init

选择 Next.js (Monorepo) 选项。

¥Select the Next.js (Monorepo) option.

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

这将创建一个包含两个工作区的新 monorepo 项目：web 和 ui，以及 Turborepo 作为构建系统。

¥This will create a new monorepo project with two workspaces: web and ui, and Turborepo as the build system.

一切都为你设置好了，因此你可以开始向项目添加组件。

¥Everything is set up for you, so you can start adding components to your project.

将组件添加到你的项目

¥Add components to your project

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

¥To add components to your project, run the add command in the path of your app.

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

CLI 将确定你要添加的组件类型，并将正确的文件安装到正确的路径。

¥The CLI will figure out what type of component you are adding and install the correct files to the correct path.

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

¥For example, if you run npx shadcn@canary add button, the CLI will install the button component under packages/ui and update the import path for components in apps/web.

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

¥If you run npx shadcn@canary add login-01, the CLI will install the button, label, input and card components under packages/ui and the login-form component under apps/web/components.

导入组件

¥Importing components

你可以按如下方式从 @workspace/ui 包导入组件：

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

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

你还可以从 @workspace/ui 包中导入钩子和实用程序。

¥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"

文件结构

¥File Structure

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

¥When you create a new monorepo project, the CLI will create the following file structure:

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

要求

¥Requirements

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

    ¥Every workspace must have a components.json file. A package.json file tells npm how to install the dependencies. A components.json file tells the CLI how and where to install components.

  2. components.json 文件必须正确定义工作区的别名。这会告诉 CLI 如何导入组件、钩子、实用程序等。

    ¥The components.json file must properly define aliases for the workspace. This tells the CLI how to import components, hooks, utilities, etc.

apps/web/components.json
{
  "$schema": "https://shadcn.nodejs.cn/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "../../packages/ui/tailwind.config.ts",
    "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://shadcn.nodejs.cn/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "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 相同。

    ¥Ensure you have the same style, iconLibrary and baseColor in both components.json files.

通过遵循这些要求，CLI 将能够将 ui 组件、块、库和钩子安装到正确的路径并为你处理导入。

¥By following these requirements, the CLI will be able to install ui components, blocks, libs and hooks to the correct paths and handle imports for you.

帮助我们改进 monorepo 支持

¥Help us improve monorepo support

我们将在 CLI 中发布 monorepo 支持作为实验。通过测试和发送反馈帮助我们改进它。

¥We're releasing monorepo support in the CLI as experimental. Help us improve it by testing it out and sending feedback.

如果你有任何疑问，请在 GitHub 讨论 上与我们联系。

¥If you have any questions, please reach out to us on GitHub Discussions.

命令行Tailwind v4