SuperAPI AI 工具集

shadcn-ui

前端与建站

查看项目

更新于 10-16 05:07

技能介绍

用途:帮助在 React/Next.js 项目中用 shadcn/ui 构建生产级界面,覆盖组件安装、定制、组合、调试与优化的完整生命周期。

主要能力:提供核心组件、表单与校验、数据展示(TanStack Table 数据表格、看板、甘特、日历)、导航、浮层、反馈、Hooks、动画与主题等参考文档,以及添加组件、构建表单、构建数据表格、定制组件、创建复合组件、添加动画、配置主题、调试组件等工作流。

核心理念:shadcn/ui 不是组件库,而是复制进项目、由你拥有的可复用组件集合。组件落在 components/ui/ 目录,应直接编辑而非包裹。安装示例:npx shadcn@latest add button。组件基于 Radix UI 保证无障碍,用 CVA 管理变体,用 cn() 处理条件类名,用 data-slot 作为样式钩子。asChild 可将行为合并到其他元素(如 Link)。主题通过 CSS 变量切换明暗模式,而非改组件代码。采用 React 19 模式,无 forwardRef。

使用方式:先选择任务(添加组件、构建表单、数据表格、定制、复合组件、动画、主题、调试等),再阅读 workflows/ 中对应工作流并严格遵循。每次改动后执行验证循环:bunx tsc --noEmit 检查 TypeScript,确认组件渲染无控制台错误,检查键盘导航、焦点状态与 ARIA,核对明暗模式与响应式,并报告结果。

适用场景:React/Next.js 项目的 UI 开发与维护。

限制:资料未提供具体收费、价格、平台支持范围与效果保证等信息。