shadcn/ui 集成测试

测试 shadcn/ui 组件库的集成效果，包括品牌色应用和各种变体

按钮变体（Variants）

按钮尺寸（Sizes）

带图标的按钮

品牌渐变色按钮

使用 --primary-gradient 变量

按钮状态

卡片和容器

卡片标题

这是一个使用 shadcn/ui 颜色系统的卡片组件示例。

品牌色卡片

按钮使用品牌主色 #c228ad

渐变色卡片

使用品牌渐变背景的按钮效果

Input 和 Label 组件

表单输入组件
展示 Input 和 Label 组件的各种用法

此字段为必填项

用户名长度应在 3-20 个字符之间

Toast 通知

Toast 通知组件
使用 sonner 库实现的轻量级 toast 通知

基础类型

带描述

带操作按钮

Promise（异步操作）

Usage: import { toast } from 'sonner'

Card 组件

基础卡片
这是一个基础的卡片组件

使用 Card、CardHeader、CardTitle、CardDescription 和 CardContent 组件。

带操作按钮
卡片中包含交互按钮

可以在卡片中添加各种内容和操作。

带表单元素
卡片中集成表单输入

组合示例：登录表单

登录
使用 Input、Label、Button 组合构建

深色模式

💡 提示：切换深色模式查看组件在不同主题下的表现。所有颜色都已针对明暗主题优化。

安装更多组件

shadcn/ui 提供了丰富的组件库，可以按需安装：

npx shadcn@latest add inputnpx shadcn@latest add cardnpx shadcn@latest add dialognpx shadcn@latest add dropdown-menu