用途:在 Next.js monorepo(apps/ui)中按仓库约定添加或改造 shadcn/ui 组件,避免与本地规范冲突。范围为 apps/ui,细节以官方 shadcn 文档为准。
主要能力:组件发现;通过 CLI 安装;按本地约定定制;给出安装后修复清单与常见陷阱提示。
使用前先阅读目标仓库的 apps/ui/components.json、apps/ui/package.json、apps/ui/src/lib/styles.ts、apps/ui/src/styles/globals.css,并保留以下约定:cn() 位于 @/lib/styles(而非 @/lib/utils);UI 组件在 apps/ui/src/components/ui;别名在 components.json 定义;原语通常从 radix-ui 包导入;Tailwind 使用 v4 风格的 CSS 入口。
工作流:确认目标组件及是新增还是重构;在 apps/ui 运行 pnpm dlx shadcn@latest add <component>;执行安装后修复;按需集成;运行 pnpm --filter @repo/ui typecheck 与 pnpm --filter @repo/ui lint 校验。
安装后修复:检查 cn() 导入路径是否为 @/lib/styles;将 @radix-ui/react-* 改为 radix-ui(除非两者并存);确认 Tailwind v4 组件引用的 CSS 变量在 globals.css 中存在;保留 "use client";新增前检查命名冲突并做差异合并。
限制:不要使用 tailwind.config.js(主题令牌在 packages/design-system/src/theme.css);避免重复安装 Radix 原语(可用 pnpm --filter @repo/ui list radix-ui 检查);不要覆盖设计系统令牌;不要假定 Tailwind v3 配置;除用户要求迁移外,不对 radix-ui、@radix-ui/* 或 Base UI 强制转换。
官方参考:https://ui.shadcn.com/docs、https://ui.shadcn.com/llms.txt、https://ui.shadcn.com/docs/installation/next、https://ui.shadcn.com/docs/tailwind-v4、https://ui.shadcn.com/docs/cli、https://ui.shadcn.com/docs/components。