Bento Grid
A dense, responsive grid whose cells can span multiple columns and rows. Each card lifts on hover and reveals a pointer-tracked glow. Collapses to a single column on small screens.
Featured
Wide cell
Cells span multiple columns and rows to build an editorial rhythm.
Compact
Tall
Hover to lift.
Detail
One
Pointer-tracked glow.
Detail
Another wide one
Fully responsive — collapses to a single column on mobile.
Installation
Registry CLI — copy the source straight into your project:
$pnpm dlx shadcn@latest add @stacklyui/bento-gridOr install the package and import it:
$pnpm add @stacklyui/ui motionUsage
Use the built-in eyebrow/title/description slots, or pass children for full control. Add a background layer with the media prop. Set colSpan/rowSpan per card and columns on the grid.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | 3 | Column count on large screens (BentoGrid). |
colSpan | number | 1 | Columns this card spans (BentoCard). |
rowSpan | number | 1 | Rows this card spans (BentoCard). |
eyebrow / title / description | ReactNode | — | Standard content slots for a BentoCard. |
media | ReactNode | — | Visual rendered behind the card's text content. |