SuperAPI AI 工具集

shadcn

前端与建站

查看项目

更新于 10-15 18:37

技能介绍

用途:指导在项目中按 shadcn/ui 模式构建界面组件,配合 Tailwind CSS 与 Radix UI 原语使用。

核心原则:组件是复制到项目中而非作为依赖安装,可直接在代码库修改;基于 Radix UI 原语,具备 ARIA 无障碍支持;完整 TypeScript 类型支持;由简单原语组合复杂界面。

安装与使用:初始化为 npx shadcn@latest init;添加组件如 npx shadcn@latest add button、npx shadcn@latest add form、npx shadcn@latest add dialog,可一次添加多个:npx shadcn@latest add button card dialog。若出现 ENOTEMPTY 等 npm 缓存错误,可执行 npm cache clean --force 后重试,或改用 pnpm dlx shadcn@latest add table、yarn dlx shadcn@latest add table,也可按文档手动复制代码。

主要能力:包含 Button、Card、Dialog、表单(react-hook-form + zod 校验)、Select 字段、Table 表格、Badge、Dropdown Menu、Tabs、Toast、Alert、Skeleton 加载态等组件的使用示例;支持通过 cva 直接修改组件变体、使用 CSS 变量(OKLCH 格式)主题、配合 next-themes 切换深色模式,以及卡片+表单、对话框+表单等组合模式。

适用场景:需要在 React 项目中快速搭建可定制、可访问的表单、表格、对话框、卡片、按钮等界面时。

限制:资料未提供具体版本兼容范围、许可证与收费信息;除上述命令与用法外,其他配置与细节暂未提供。