SuperAPI AI 工具集

shadcn-ui

通用与其它

查看项目

更新于 10-16 00:29

技能介绍

用途:shadcn/ui 提供基于 Radix UI 原语构建的 React 组件,强调可访问性、可定制性与美观设计,适合在 React 项目中添加、定制 UI 组件并进行主题化。

主要能力:提供按钮、卡片、表单、对话框、选择器、下拉菜单、表格、提示(Toast)、警告对话框等组件;支持变体与尺寸、受控与非受控用法;通过 CSS 变量实现主题(含暗色模式),通过 Tailwind 配置扩展自定义颜色;组件可本地复制后修改,便于扩展变体与创建组合组件。

使用方式:在项目中初始化执行 npx shadcn@latest init,按提示配置 TypeScript、样式、基础色、全局 CSS 文件、CSS 变量、tailwind 配置及导入别名(组件 @/components,工具 @/lib/utils)。添加组件如 npx shadcn@latest add button、card、input、form 等。核心工具函数 cn() 位于 lib/utils.ts,结合 clsx 与 tailwind-merge 处理条件类名。主题在 globals.css 中以 CSS 变量定义,支持 :root 与 .dark;可在 tailwind 配置中扩展颜色;组件变体通过 cva 扩展,组合组件可在本地基于 Card 等封装。

适用场景:需要可访问、可定制 React UI 组件并进行主题化与暗色模式支持的界面开发。

限制与注意:最佳实践是复制而非从 npm 导入、使用 CSS 变量、利用 cn()、保留无障碍 ARIA 属性并本地定制;常见错误包括从 npm 导入、移除无障碍特性、过度定制、忽略暗色模式、硬编码颜色。具体收费、价格与平台等资料暂未提供。