Back to DocsBento GridAll Styles

Bento Grid

Inspired by Japanese bento boxes, this layout creates visual hierarchy through irregular grid arrangements with varying card sizes.

Color System

Soft, approachable colors with vibrant accents

Primary

#3b82f6

Secondary

#8b5cf6

Background

#fafafa

Surface

#ffffff

Text

#18181b

Bento Layout

Irregular grid with varying card sizes for visual interest

Main Feature

The largest card commands attention, perfect for showcasing your primary value proposition.

Quick Deploy

One-click deployment to any modern hosting platform including Vercel and Netlify.

99.9%

Uptime SLA

10K+

Active Users

Design System

Complete design specs and component library for consistent UX.

  • 50+ Components
  • Dark Mode
  • Responsive

New Features Coming

More exciting features in development

Mobile First

Buttons

Rounded buttons with gradient and solid variants

Variants

Colored

Sizes

Card Variants

Different card styles for various content types

Feature Card

Standard feature card with icon, title, and description.

Total Revenue

$84,254

+12.5%

Dark Card

Perfect for highlighting important content.

Image Card

Card with image header.

Interactive Card

Hover me to see the effect!

Colored Card

Soft colored backgrounds for categorization.

Tabs

Clean tab navigation with rounded indicators

Overview content - Quick summary of your dashboard metrics and key insights.

Alerts

Notification cards with status indicators

Default notification message
Success! Your changes have been saved.
Error! Something went wrong.
Warning! Please review before continuing.

Feature Grid

Compact feature showcase with colored icons

Secure

Global CDN

Analytics

API Ready

Real-time

Precise

Customizable

Growing

Design Rules

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 保持网格项之间的一致性

Bento Grid Showcase · Part of StyleKit