大仓
在 monorepo 中使用 shadcn/ui 组件和 CLI。
注意:我们将在 CLI 中发布 monorepo 支持作为实验。通过测试和发送反馈帮助我们改进它。如果你有任何疑问,请联系 联系我们。
¥Note: We're releasing monorepo support in the CLI as experimental. Help us improve it by testing it out and sending feedback. If you have any questions, please reach out to us.
到目前为止,在 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
-
每个工作区都必须有一个
components.json
文件。package.json
文件告诉 npm 如何安装依赖。components.json
文件告诉 CLI 如何以及在何处安装组件。¥Every workspace must have a
components.json
file. Apackage.json
file tells npm how to install the dependencies. Acomponents.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.
{
"$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"
}
}
{
"$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"
}
}
-
确保两个
components.json
文件中的style
、iconLibrary
和baseColor
相同。¥Ensure you have the same
style
,iconLibrary
andbaseColor
in bothcomponents.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.