Spotlight Grid
Bento & Grids
Source and install need .
pnpm dlx shadcn@latest add @assembli/bento-gridBento Grid
The bento layout primitive: a dense grid plus cards that span columns and rows, with an icon, eyebrow, title, description and a visual stacked above, laid behind or set beside the text (by the card's own width). Four tones, a soft light that follows the pointer, and link cards whose arrow nudges on hover.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
columns
3 | 4 | 6
Default
3Columns on large screens. Phones get one column and tablets two.
rowHeight
string
Default
"11rem"Minimum height of one row, as a CSS length. Cards with
rowSpancover several rows plus the gaps between.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | 3 | 4 | 6 | 3 | Columns on large screens. Phones get one column and tablets two. |
| rowHeight | string | "11rem" | Minimum height of one row, as a CSS length. Cards with rowSpan cover several rows plus the gaps between. |
