Bento
CSS-grid dashboard layout with shorthand tiles for composing analytics and overview pages.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Bento />
When to Use
- Compose dashboards from a grid of mixed-size KPI, chart, and list tiles
- Build marketing "bento" feature grids (shadcn-style block showcases)
- Mix tall cards, wide cards, and small tiles in a single responsive grid
- Anywhere you would reach for Tremor's Grid + Card shorthand
Revenue
Last 30 days
$48,290
New users
1,204
Churn
2.1%
Latest activity
Feed
No events in the last hour.
Sessions
8,492
Avg. duration
4m 12s
Switch gap to see spacing between tiles change.
Revenue
$48,290
Users
12,402
Sessions
8,492
Churn
2.1%
Revenue
$48,290
+12.3%
Active users
12,402
+4.8%
MRR
$9,820
-1.2%
Page views
184k
Signups
421
Traffic
Last 7 days
Chart placeholder
API Reference
Bento
Gap values: Sm = 0.75rem, Md = 1rem, Lg = 1.5rem.
BentoTile
KpiCard
SparkCard
Delta
Related Components
- Dashboard Tiles — KpiCard, SparkCard, and Delta examples
- Grid — Lower-level CSS grid primitive
- Card — Base container with header/content/footer