Bento Grid
A multi-column grid layout with bento boxes.
Examples
Implementation of bento grid
You can add upto 7 cards in the bento grid and minimum of 3 cards.
Multiple cards & click functionality
Hover over the bento grid and click any card.
Installation
npx shadcn@latest add "https://aetherui.in/c/bento-grid.json"
Usage
You can customize the content of the bento grid by passing the following props to the component.
Bento Grid Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | Array | An array of cards to be displayed in the bento grid (minimum of 3 cards and maximum of 7 cards). | |
| className | string | Additional class names to be applied to the bento grid. | |
| customId | string | A unique identifier for the bento grid. | |
| isClickable | boolean | false | A boolean prop to enable click functionality on the bento grid. |
| ...props | any | Additional props to be passed to the bento grid. |