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.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/bento-grid.jsonEverything 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.