The BentoGrid component arranges cards of different sizes into the asymmetric layout known as a bento box, with each cell declaring how many columns and rows it spans and every card collapsing to full width on small screens.
For a feature section where the items are genuinely not equal, such as one headline capability beside three supporting ones. The layout's job is to rank them, so it only works if you actually mean the ranking: four cards of identical weight in an uneven grid look arbitrary, and a plain equal grid says more. Keep spans to two or three columns at most; a card spanning the full width stops reading as part of the arrangement and becomes a banner sitting inside it.
Add it with the CLI, open it in v0, or copy the source into your project.
Everything Bento Grid accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | BentoCard elements to lay out |
| columns | number | 3 | Columns from the sm breakpoint up. Below it the grid is always one column |
| gap | number | 16 | Space between cells, in pixels |
| className | string | '' | Additional CSS classes for styling |
| BentoCard: children (required) | React.ReactNode | No default | Contents of one cell |
| BentoCard: colSpan | number | 1 | Columns this card spans, from sm up |
| BentoCard: rowSpan | number | 1 | Rows this card spans, from sm up |
| BentoCard: className | string | '' | Additional CSS classes for one cell |
Required.
Every component lands in your repo as plain source you can edit.
Animation is part of the component, not a wrapper bolted on later.
Colours come from your own tokens.
Every prop has a table, a playground, and a reason to exist.