按钮
Organic button with warm gradients, large rounded corners and nature-inspired styling
- 基础骨架
font-medium rounded-2xl transition-all duration-300- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
太阳朋克组件配方
font-medium rounded-2xl transition-all duration-300 bg-gradient-to-r from-green-400 to-emerald-500 text-white shadow-lg shadow-green-300/40 hover:shadow-xl hover:shadow-green-300/50 hover:scale-105 active:scale-[0.98]卡片
Organic card with warm background, plant-themed decorations and soft shadows
- 基础骨架
bg-white/80 backdrop-blur-sm border border-green-200 rounded-3xl transition-all duration-300- 变体
- 默认、金色、天空
- 状态
- hover
输入框
Organic input with warm background, green focus glow and nature-inspired styling
- 基础骨架
w-full bg-white/80 backdrop-blur-sm border border-green-200 rounded-2xl text-gray-800 placeholder:text-green-300 focus:outline-none transition-all duration-300- 变体
- 默认、金色
- 状态
- focus、disabled
叶片面板
Panel with organic leaf-shaped border and nature-inspired styling
- 基础骨架
bg-white/80 backdrop-blur-sm border border-green-300 rounded-[60%_40%_70%_30%/40%_60%_30%_70%] bg-[linear-gradient(135deg,rgba(34,197,94,0.05)_0%,transparent_50%,rgba(34,197,94,0.03)_100%)] transition-all duration-300- 变体
- 默认、茂盛、简约
- 状态
- hover
太阳能进度条
Progress bar with solar energy aesthetic and warm gradients
- 基础骨架
w-full h-4 rounded-full bg-gray-200/60 overflow-hidden border border-green-300/30 [&>div]:rounded-full transition-all duration-500- 变体
- 太阳能、风能、水能
- 状态
- 静态
生态提示
Alert component with eco-friendly nature aesthetic
- 基础骨架
relative bg-white/80 backdrop-blur-sm border-0 rounded-r-2xl pl-5 p-4 md:p-5 before:content-[''] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-gradient-to-b before:from-green-500 before:via-emerald-400 before:to-sky-400 before:rounded-full transition-all duration-300- 变体
- 信息、成长、警告
- 状态
- hover