Inspired by Japanese bento boxes, this layout creates visual hierarchy through irregular grid arrangements with varying card sizes.
Soft, approachable colors with vibrant accents
Primary
#3b82f6
Secondary
#8b5cf6
Background
#fafafa
Surface
#ffffff
Text
#18181b
Irregular grid with varying card sizes for visual interest
The largest card commands attention, perfect for showcasing your primary value proposition.
One-click deployment to any modern hosting platform including Vercel and Netlify.
Uptime SLA
Active Users
Complete design specs and component library for consistent UX.
More exciting features in development
Mobile First
Rounded buttons with gradient and solid variants
Variants
Colored
Sizes
Different card styles for various content types
Standard feature card with icon, title, and description.
Total Revenue
$84,254
Perfect for highlighting important content.
Card with image header.
Hover me to see the effect!
Soft colored backgrounds for categorization.
Clean tab navigation with rounded indicators
Notification cards with status indicators
Compact feature showcase with colored icons
Key principles for Bento Grid layouts
col-span 和 row-span 创造大小不一的卡片
rounded-2xl 或 rounded-3xl 营造友好感
使用 bg-*-50 或 bg-*-100 的浅色背景
重要卡片使用渐变背景突出层次
shadow-sm 配合 hover:shadow-md 过渡
gap-4 保持网格项之间的一致性