用途:在 React(Vite)应用中构建可访问、可定制的 UI 组件,覆盖表单(输入、选择、复选框)、对话框/抽屉/浮层、数据表格(排序、筛选、分页)、导航菜单与命令面板、Toast 通知等。
主要能力:组件采用复制进项目的模式,代码归项目所有;基础库可选 Base UI(默认)、Radix UI 或 React Aria,组件名一致;使用 Tailwind CSS v4 的 CSS-first 主题(@theme inline、OKLCH 令牌);表单使用 TanStack Form(非 React Hook Form),Field + FieldError 接收 Standard Schema 错误;默认 Lucide 图标,可在 components.json 中配置。
使用方式:写组件前先读取 components.json 判断基础库(base-* 为 Base UI,radix-/new-york 为 Radix,aria- 为 React Aria),同一组件不得混用基础库。组件必须通过 bunx --bun shadcn@latest add 安装,禁止手写,安装到 @/modules/cores/shadcn/components/ui/。组合方式随基础库不同:Base UI 用 render={<Button />},Radix 用 asChild。可通过 bunx --bun shadcn@latest mcp init --client claude 接入 MCP,使用 mcp__shadcn__* 工具检索组件、查看源码与示例、获取安装命令;也可用 shadcn info 与 shadcn docs <component> -b <base|radix|aria>。
适用场景:React 单页应用中的组件开发、表单与校验、浮层交互、数据展示与导航。
限制:这是纯 React 变体,Next.js App Router 应改用 nextjs-shadcn;不同基础库在触发器、Select、Accordion、Toggle group、Checkbox、Drawer、Toast 等 API 上存在差异,Radix 示例需翻译到 Base UI;Radix Toast 已弃用,Radix/Aria 使用 Sonner。资料未提供收费、价格与效果数据。