Inspired by the Japanese bento box — every element has its perfect place. Varying card sizes create rhythm, hierarchy, and visual delight in a single glance.
Mix col-span and row-span to compose layouts that feel alive, not rigid.
A complete UI component library built for modern product teams.
Response Time
48ms
avg. global latency
99.9%
uptime
12K+
users
The same grid system adapts to any context — personal profile, portfolio, or product dashboard.
Product Designer & Developer
@alex_tanaka
12.4K followers
alex-tanaka
420 repos
Skills
Hover each widget to see its unique micro-interaction. Small details make the difference.
Pro Feature
The icon container transitions from neutral to brand blue on hover using group-hover:bg-blue-500.
Scale on Hover
Total API calls this month
Progress Bars
Tag Cloud
Hover the card to see all tags shift color
These are the building blocks. Combine them to create any rhythm you imagine.
col-span-1
row-span-1
col-span-2
row-span-1
col-span-1
row-span-1
col-span-1
row-span-2
col-span-3
row-span-1
col-span-2
row-span-2
The hero card. Always the anchor of your layout.
col-span-1
row-span-1
col-span-1
row-span-1
col-span-4
Full-width — great for stats, banners, or CTAs
Each color carries meaning. Use them consistently to build visual hierarchy across your grid.
Zinc 900
Dark Background
Zinc 50
Light Background
Blue 500
Primary Accent
Purple 500
Secondary Accent
Pink 500
Highlight
Orange 500
Warning / Energy
The difference between a bento grid that feels polished and one that falls flat.
Vary card sizes
Use col-span-2, col-span-3, and row-span-2 to create natural hierarchy.
Consistent gap
Use gap-4 or gap-6 uniformly — never mix gap sizes in the same grid.
rounded-2xl or larger
Soft corners signal approachability and fit the iOS-inspired aesthetic.
Hover lift effect
translate-y-1 + scale-[1.01] on every card gives a tactile, widget feel.
Soft shadows
rgba(0,0,0,0.08) style — never hard drop-shadows that feel harsh.
All same-size cards
A grid of identical tiles is a table, not a bento. Break the monotony.
Inconsistent gap
Mixing gap-2 and gap-8 in one layout destroys visual coherence.
Sharp corners (rounded-none)
Hard corners feel cold and dated. Always use at least rounded-xl.
No hover state
Static cards feel dead. Every widget should respond to user intent.
Hard box shadows
box-shadow: 0 4px 6px black looks heavy. Keep shadows light and warm.
A fictional SaaS product landing page, built entirely with bento grid principles. Eight cards. One unified layout. Zero compromise.
Lumio brings together your team, tools, and insights in one beautiful, intelligent workspace.
Active users
48K
+22% this month
NPS Score
72
World-class product love
Integrations
Connect every tool your team already uses. No re-learning required.
Every meeting, document, and thread — summarized automatically.
Enterprise-grade security, compliance built-in from day one.
Sub-100ms global response times. Edge-cached across 32 regions worldwide. Your team never waits.
32
edge regions
"Lumio transformed how our team collaborates. We shipped 3x faster in the first month. The bento-style dashboard gives everyone exactly what they need, nothing more."
Maya Kim
CTO, Veritas Labs