SuperAPI AI 工具集

shadcnui

前端与建站

查看项目

更新于 10-15 21:49

技能介绍

用途:shadcn/ui 不是传统组件库,而是把可复用组件直接复制进项目,让开发者完全拥有 React UI 代码,避免 npm 依赖锁定。适合构建现代 SaaS 仪表盘、Web 界面与可主题化的设计系统。

主要能力:基于 Radix UI 提供符合 WAI-ARIA 的可访问原语,用 Tailwind CSS 进行样式定制;支持通过 CSS 变量调整主题、圆角与中性色板,便于适配深色模式。常见组件包括按钮、卡片、对话框、表单等,并可与 React Hook Form、Zod 组合实现类型安全表单校验。

使用方式:在 Next.js 或 Vite 项目中初始化并添加组件: npx shadcn@latest init npx shadcn@latest add button card dialog 组件导入路径形如 @/components/ui/button。样式变体可用 class-variance-authority(cva)与 cn() 工具(clsx + tailwind-merge)合并类名。

适用场景:需要完全掌控组件源码、构建可访问设计系统、开发 Next.js/Vite 现代 Web 应用,以及需要主题化组件库的项目。

限制与注意:资料未提供收费、价格、平台或效果信息。使用中若出现 Cannot find module '@/components/ui/button',需在 tsconfig.json 配置路径别名;样式缺失需在 tailwind.config.js 的 content 中加入组件目录;缺少 clsx 或 tailwind-merge 时运行 npm install clsx tailwind-merge。建议按需安装组件,使用 asChild 避免嵌套交互元素,不要移除 ARIA 属性或焦点样式。