在 TurboRepo Monorepo 中优雅集成 shadcn/ui —— 一次“组件搬家”的奇妙旅程

“组件要共享，代码要优雅，团队要高效！”——每个前端工程师的心声

前言

你是不是也遇到过这种场景：团队用上了 TurboRepo 管理 monorepo，React 项目越来越多，UI 组件却各自为政？shadcn/ui 组件库横空出世，大家都想用，但怎么优雅地集成到 monorepo 里，既能共享又不乱套？

别怕，今天就带你用最实用的方式，把 shadcn/ui 集成进 TurboRepo 的 monorepo，顺便聊聊踩过的坑和官方文档里没明说的“门道”。

1. 目录结构先理清

假设你的 monorepo 结构大致如下：

小贴士：组件库建议单独放在 packages/ui-shadcn，这样所有 app 都能用，升级维护也方便。

2. 初始化 shadcn/ui 组件库

进入你的组件库目录，初始化 shadcn/ui：

• 选择 Next.js (Monorepo) 方案
• 跟着 CLI 步骤走，自动生成 components.json、src/components/ 等目录

3. 配置 components.json 和 tsconfig.json

关键点：shadcn/ui CLI 依赖 components.json 和 tsconfig.json 的 paths 配置，决定组件生成和导入路径。

packages/ui-shadcn/components.json 示例

packages/ui-shadcn/tsconfig.json 关键配置

4. 在 app 里配置依赖和路径

apps/blog/package.json 增加依赖

apps/blog/tsconfig.json 增加路径映射

5. 添加和使用组件

添加新组件（比如 Button）：

在 app 里使用：

6. 图解流程

7. 踩坑与官方文档

• 不要用 ，2024年后 shadcn/ui CLI 已废弃，全部靠 tsconfig 路径和 alias。
• 组件一定要在 目录下用 CLI 添加，否则会加到 app 本地，失去共享意义。
• 依赖要补全，比如 radix-ui、class-variance-authority 等，缺啥补啥。

官方文档：

• shadcn/ui Monorepo 官方文档
• Vercel Academy: components.json 详解

8. 总结

shadcn/ui + TurboRepo = 组件共享的极致体验。只要理顺 alias 和 tsconfig，组件复用、升级、维护都能优雅搞定。遇到问题多看官方文档，多用 CLI，少手动搬砖！

你还遇到哪些 shadcn/ui 的集成问题？欢迎留言讨论！