SuperAPI AI 工具集

shadcn

通用与其它

查看项目

更新于 10-16 00:06

技能介绍

用途:本资料说明如何在项目中使用 shadcn/ui 组件。项目采用 New York 风格变体,组件基于 Radix UI 原语并使用 Tailwind CSS 样式。

配置:风格为 new-york,基础色为 neutral,图标使用 lucide-react,组件位于 resources/js/components/ui/,工具函数位于 resources/js/lib/utils.ts。

添加组件:使用 shadcn CLI,例如 npx shadcn@latest add table、npx shadcn@latest add tabs、npx shadcn@latest add calendar。不要手动创建 shadcn 组件,应始终用 CLI 以保证样式与依赖正确。

已安装组件:alert、alert-dialog、avatar、badge、breadcrumb、button、card、checkbox、collapsible、dialog、dropdown-menu、input、input-otp、label、navigation-menu、select、separator、sheet、sidebar、skeleton、sonner(Toast 通知)、spinner、toggle、toggle-group、tooltip。

使用方式:始终从 @/components/ui/ 导入。Button 提供 Small、Default、Large 等尺寸。表单使用 Label 与 Input 搭配并设置错误样式。对话框遵循 Dialog 模式。Toast 使用 Sonner,如 toast.success('Changes saved successfully')、toast.error('Something went wrong'),也可带 description。使用 @/lib/utils 的 cn() 按条件合并 Tailwind 类。图标使用 Lucide React。

限制:资料未提供版本要求、安装前置条件、主题定制细节及更多组件用法,暂未提供。