大仓 - shadcn 中文网

大仓

在 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.

注意：monorepo 使用 React 19 和 Tailwind CSS v4。

¥Note: The monorepo uses React 19 and Tailwind CSS v4.

将组件添加到你的项目

¥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

每个工作区都必须有一个 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.
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": "",
    "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": "",
    "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"
  }
}

确保两个 components.json 文件中的 style、iconLibrary 和 baseColor 相同。

¥Ensure you have the same style, iconLibrary and baseColor in both components.json files.
对于 Tailwind CSS v4，请在 components.json 文件中将 tailwind 配置留空。

¥For Tailwind CSS v4, leave the tailwind config empty in the components.json file.

通过遵循这些要求，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.

命令行 Tailwind v4

页面导航

入门
文件结构
要求