用途:在构建或重构 UI 组件时,强制遵循 ShadCN UI 模式、无障碍标准与 TailwindCSS 实践,适用于 React/Next.js 项目,包括表单校验、模态框、侧边栏、下拉菜单等场景。
主要能力:以复制粘贴而非 npm 依赖的方式获得组件代码所有权;基于 Radix UI 原语内置无障碍(资料称符合 WCAG 2.1 AA);TailwindCSS 优先、TypeScript 原生类型;兼容 Next.js 15 App Router 的服务端组件。
用法:按需安装组件,如 npx shadcn@latest add button、dialog、form、input、label,组件复制到 src/components/ui/ 目录。按钮使用语义化 variant(default、destructive、outline、ghost、link)与 size(default、sm、lg、icon)。对话框使用 Dialog、DialogTrigger、DialogContent、DialogHeader、DialogTitle、DialogDescription 等结构,触发器用 asChild 合并属性。表单结合 react-hook-form、zodResolver 与 Zod schema 先定义校验,再通过 Form、FormField、FormItem、FormLabel、FormControl、FormDescription、FormMessage 渲染。状态需求时用 'use client' 客户端组件,静态对话框可用服务端组件。条件类名用 cn() 帮助函数,暗色模式用 Tailwind dark: 类。
限制与注意:避免跳过 DialogTitle 等无障碍结构、避免用原生 button 硬编码颜色、避免 inline style 或自定义 CSS 文件、避免不用 asChild 造成嵌套按钮。资料包含用 @testing-library/react 与 user-event 测试对话框开关和 ESC 关闭的示例。官方文档为 https://ui.shadcn.com,Radix UI 文档为 https://www.radix-ui.com。资料未提供收费、价格或平台支持细节。