SuperAPI AI 工具集

shadcn-ui

通用与其它

查看项目

更新于 10-16 00:01

技能介绍

用途:指导前端工程师用 shadcn/ui 发现、集成和定制组件,并说明其设计原则与配置方式。

核心理念:shadcn/ui 不是常规组件库,而是把可复用组件源码复制进项目,因此组件位于代码库而非 node_modules,可自由改样式、行为与结构,并可选择 Radix UI 或 Base UI 作为底层原语,避免版本锁定和运行时体积开销。

主要能力:通过 MCP 工具浏览目录、查看组件元数据与演示;支持 CLI 安装或手动复制源码;支持自定义注册表的列出、查看与搜索;提供 blocks(如 login、dashboard、sidebar、products、calendar)与常见模式(表单、Dialog、表格)。

使用方式:新项目用 npx shadcn@latest create 定制初始化,已有项目用 npx shadcn@latest init 生成 components.json;添加组件用 npx shadcn@latest add [component-name],会自动下载源码、安装依赖、写入 components/ui/ 并更新配置。依赖 React 18+、Tailwind CSS 3.0+、Radix UI 或 Base UI、class-variance-authority、clsx 与 tailwind-merge,类名合并统一用 cn()。

默认品牌系统:默认浅色模式,字体 Public Sans;主色 #1275e2、次色 #5f78a3、第三色 #c55b00、中性色 #74777f;圆角 --radius: 0.625rem;卡片 p-6、常用 gap-4/gap-6、控件 h-10 px-4。若项目已有更强设计系统则保留原样。

适用场景:React/Tailwind 应用的表单、弹窗、数据展示、仪表盘与认证流程等界面搭建,需要完全掌控组件源码和样式时。

限制与注意:组件基于 Radix UI 原语,定制时需保留 ARIA 属性、键盘处理与焦点管理;常见问题包括 alias 配置、Tailwind 与 globals.css 引入、依赖缺失;提交前建议 tsc --noEmit、lint、axe 无障碍检查与断点验证。具体版本兼容与迁移细节以资料所列资源文件为准,其他信息暂未提供。