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
| Property | Type | Default | Description |
|---|---|---|---|
| Columns | int | 4 | Target number of grid columns at the lg: breakpoint (≥1024 px). The grid collapses to 1 column on mobile and 2 on sm: (≥640 px) so embedded tiles stay readable. Standard values 1–6 use pre-compiled Tailwind utilities; other values fall back to inline grid-template-columns without responsive collapse. |
| Gap | BentoGap | Md | Gap between tiles. Sm = 0.75rem, Md = 1rem, Lg = 1.5rem. |
| ChildContent | RenderFragment? | - | BentoTile children (or any grid items). |
BentoTile
| Property | Type | Default | Description |
|---|---|---|---|
| Span | int | 1 | Column span at the lg: breakpoint. Tiles always span 1 column on mobile; tiles with Span ≥ 2 widen to 2 columns at sm: and the full Span at lg:. |
| RowSpan | int | 1 | Row span at the lg: breakpoint. Mobile and tablet render each tile at its natural content height (RowSpan=1) so tall tiles don't create huge empty boxes. |
| Title | string? | null | Optional header title. |
| Description | string? | null | Optional header description below the title. |
| HeaderContent | RenderFragment? | - | Custom header slot; overrides Title/Description. |
| FooterContent | RenderFragment? | - | Optional footer slot separated by a top border. |
| ChildContent | RenderFragment? | - | Main body content. |
KpiCard
| Property | Type | Default | Description |
|---|---|---|---|
| Label | string? | null | Metric label. |
| Value | string? | null | Pre-formatted value string. |
| Delta | double? | null | Optional delta value — rendered as a colored pill. |
| DeltaFormat | KpiDeltaFormat | Percent | Percent or Absolute number formatting. |
| DeltaPositive | KpiDeltaDirection | Good | Good = +is-green; Bad = +is-red (e.g., churn rate). |
| IconContent | RenderFragment? | - | Optional icon slot shown before the label. |
| SparkContent | RenderFragment? | - | Optional compact chart slot aligned right of the delta. |
SparkCard
| Property | Type | Default | Description |
|---|---|---|---|
| Label | string? | null | Card label. |
| Value | string? | null | Pre-formatted metric value. |
| Data | IEnumerable<double>? | null | Sparkline data — rendered as a normalized SVG polyline. |
| ChildContent | RenderFragment? | - | Fallback slot — use to drop in a Lumeo.Chart instead of the built-in sparkline. |
Delta
| Property | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | Numeric delta. |
| Format | DeltaFormat | Percent | Percent or Absolute formatting. |
| Positive | DeltaDirection | Good | Whether "up" is good (green) or bad (red). |
| ShowArrow | bool | true | Toggles the directional chevron icon. |
Related Components
- Dashboard Tiles — KpiCard, SparkCard, and Delta examples
- Grid — Lower-level CSS grid primitive
- Card — Base container with header/content/footer