Bento layout of spanning cards with a cursor spotlight and a hover lift.
npx shadcn@latest add https://hyperblur.dev/r/bento-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-grid.tsx.
import { BentoGrid } from "@/components/hyperblur/bento-grid"
<BentoGrid columns={3}><BentoCard colSpan={2} title="Fast" description="Zero config." /><BentoCard rowSpan={2} title="Tiny" /></BentoGrid>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | BentoCard elements (BentoGrid props). |
| columns | number | 3 | Number of grid columns (BentoGrid). |
| gap | number | 16 | Gap between cards in pixels (BentoGrid). |
| rowHeight | number | 160 | Height of one grid row in pixels (BentoGrid). |
| colSpan | number | 1 | Columns a card spans (BentoCard). |
| rowSpan | number | 1 | Rows a card spans (BentoCard). |
| title | ReactNode | Card heading (BentoCard). | |
| description | ReactNode | Card supporting text (BentoCard). | |
| icon | ReactNode | Icon shown above the title (BentoCard). |