SuperAPI AI 工具集

shadcn-ui

前端与建站

查看项目

更新于 10-15 23:31

技能介绍

用途:在已完成主题配置的 React 项目中添加 shadcn/ui 组件,负责组件安装、定制,以及把组件组合成可用界面模式。前置条件是主题基础设施已存在(CSS 变量、components.json、cn() 工具),否则应先用 tailwind-theme-builder 搭建。

主要能力:按依赖顺序安装组件,先装基础组件(button、input、label、card),再按需装表单、反馈、浮层、数据展示、导航等特性组件;管理外部依赖,如 Form 需 react-hook-form、zod、@hookform/resolvers,Toast 需 sonner,Data Table 需 @tanstack/react-table,Command 需 cmdk,Date Picker 可选 date-fns;提供常见问题修正,如 Radix Select 不能用空字符串值、React Hook Form 字段值可能为 null、Lucide 图标动态导入会被 tree-shaking、Dialog 宽度需用相同断点前缀覆盖;支持通过编辑 src/components/ui/ 下组件文件扩展变体,并使用主题语义 token 而非原始 Tailwind 颜色。

使用方式:用 pnpm dlx shadcn@latest add 命令安装组件,外部依赖用 pnpm add 单独安装。流程为评估需求、安装组件、按 recipes 组合模式、再用语义 token 定制。

适用场景:带校验的表单、可排序数据表、后台 CRUD、营销落地页、设置页、桌面与移动导航等。

限制:依赖既有主题基础设施;部分组件需额外依赖;资料未提供收费、价格与平台支持信息。