Layout

BentoGrid

A dashboard of tiles on the 12 column grid: one column on a phone, 6 from 640px, 12 from 1024px. Each tile is a size container, so what is inside responds to the tile's width, not the window's. The tiles keep the order of the markup, which is the order they are read in, and enter one after another, the stagger capped.

view .md

Preview

balance

$12,045.80

Up +7.4%vs August

emergency fund$6,200 of $10,000

all accounts synced4 banks · 2 min ago

budgets12 days left

groceries

dining out

learning

recent+11.3% spent

coffeeout · 2026-09-27−$4.50
bookslearning · 2026-09-27−$62.00
client invoiceincome · 2026-09-26+$9,500.00

Installation

terminal

bash

npx @entrepta/cli@latest add bento-grid

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

bento-grid.tsx

tsx

import { BentoGrid, BentoItem } from "@/components/entrepta/bento-grid"
import { SpotlightCard } from "@/components/entrepta/spotlight-card"

<BentoGrid>
  <BentoItem colSpan={{ sm: 6, lg: 8 }} rowSpan={{ lg: 2 }}>
    <SpotlightCard>…</SpotlightCard>
  </BentoItem>
  <BentoItem colSpan={{ sm: 3, lg: 4 }}>
    <SpotlightCard><Metric … /></SpotlightCard>
  </BentoItem>
</BentoGrid>

Props

Prop	Type	Default	Description
colSpan	{ sm?: 1-6, lg?: 1-12 }	{ sm: 3, lg: 4 }	On BentoItem. A breakpoint left out spans the full row
rowSpan	1-4 \| { sm?, lg? }	-	On BentoItem. A number applies from 640px up
reveal	boolean	true	On BentoItem: the entrance
--bento-row	CSS length	120px	The shortest row