用途:在 Next.js 项目中使用 shadcn/ui 构建界面。它并非 npm 包,而是通过 CLI 把基于 Radix UI 和 Tailwind CSS 的组件源码复制到项目的 components/ui/,因此可完全掌控和修改组件。
主要能力:提供可访问、可用 Tailwind 定制、可组合的组件;支持表单(React Hook Form + Zod 校验)、基于 TanStack Table 的数据表格、基于 Recharts 的图表、预构建的 Blocks(仪表盘、登录页、侧边栏),以及用 globals.css 中的 CSS 变量(oklch 格式)做明暗主题。
使用方式:初始化运行 npx shadcn@latest init;按需安装组件,如 npx shadcn@latest add button card dialog;表单需安装 form input label 并 npm install zod;数据表格需安装 table 并 npm install @tanstack/react-table;图表需安装 chart 并 npm install recharts。组件统一从 @/components/ui/... 导入,例如 import { Button } from "@/components/ui/button"。
Next.js 集成:组件内部使用 Radix 钩子,属客户端组件,使用处需加 "use client",或抽到客户端包装组件中;仅含组件的页面可直接加 "use client",混合数据获取的页面保持服务端组件、把交互部分抽成客户端组件;全局 Provider 放在独立的客户端文件里再于 layout.tsx 引入。
限制与规则:不要用 npm 安装组件,不要从 shadcn 或 @shadcn/ui 导入,不要硬编码颜色,应在 components/ui/ 中直接改组件源码。资料未提供收费、价格或官方维护状态等信息。