# Bento

Source: https://lumeo.nativ.sh/components/bento

# Bento

CSS-grid dashboard layout with shorthand tiles for composing analytics and overview pages.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Basic 4-column bento

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

Preview Code

Gap (interactive)

Switch gap to see spacing between tiles change.

Sm Md Lg

Revenue

$48,290

Users

12,402

Sessions

8,492

Churn

2.1%

Preview Code

Dashboard — KPI row + spark + wide tile

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](/components/dashboard-tiles) — KpiCard, SparkCard, and Delta examples
-   [Grid](/components/grid) — Lower-level CSS grid primitive
-   [Card](/components/card) — Base container with header/content/footer