用途:帮助在 React/Next.js 项目中搭建和使用 shadcn/ui 组件库,覆盖初始化、配置、组件安装与常见实现模式,适用于需要可访问、可自定义 UI 的前端开发场景。
主要能力:组件代码被复制进项目,由开发者自行拥有和修改;基于 Radix UI 保证可访问性;使用 Tailwind CSS 与 CSS 变量做主题化;通过 CLI 按需添加组件。资料列出的组件包括 button、input、form、card、dialog、sheet、select、toast、table、menubar、chart、textarea、checkbox、label 等。表单支持 React Hook Form 与 Zod 校验;图表基于 Recharts 封装并带主题。
使用方式:新建项目可执行 npx create-next-app@latest my-app --typescript --tailwind --eslint --app,再运行 npx shadcn@latest init 初始化;已有项目可先安装 tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react,再执行 npx shadcn@latest init。添加组件使用 npx shadcn@latest add <component>,如 npx shadcn@latest add button input form card dialog select toast。表单需将 Form、FormField、FormItem、FormLabel、FormMessage 配合使用;Toast 需在根布局添加一次 <Toaster />。
限制与注意:并非 NPM 包,组件不是带版本管理的依赖;组件由远程注册表获取,安装前应确认来源可信并审查生成的代码;多数交互组件需要 "use client";依赖 Radix 包与 Tailwind CSS;需在 tsconfig.json 配置 @ 路径别名。收费、价格与平台支持信息暂未提供。