Bento Grid
Bento & Grids
Source and install need .
pnpm dlx shadcn@latest add @assembli/expanding-card-gridExpanding Card Grid
A grid of cards that each open into a full view. The card grows into a centered panel, its picture and title travelling with it, while the page dims. Closing shrinks it back into its slot. The open card is a modal dialog: focus moves in and stays there, and Escape, the close button or a click outside closes it.
Props
Other props pass through to the root element.
items*
ExpandingCardItem[]
columns
2 | 3 | 4
Default
3Columns on large screens. Phones get one column and tablets two.
defaultOpen
string
Open this card on first render.
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | ExpandingCardItem[] | – | |
| columns | 2 | 3 | 4 | 3 | Columns on large screens. Phones get one column and tablets two. |
| defaultOpen | string | – | Open this card on first render. |
