Bento Grid

A bento-box grid layout — cards reveal with a stagger, and on hover the focused card lifts while the rest dim slightly.

Loading preview…

npx shadcn@latest add https://webberui.com/r/bento-grid.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Columnscolumns

Stagger (s)stagger

0.08

Entrance delay (s)delay

Play onceonce

<BentoGrid />

Installation

npx shadcn@latest add https://webberui.com/r/bento-grid.json

Or, once registries are configured in components.json, install it as @webberui/bento-grid.

Usage

import { BentoGrid, BentoCard } from "@/components/ui/bento-grid";

<BentoGrid columns={3}>
  <BentoCard colSpan={2} title="Featured" description="A headline card spanning two columns." />
  <BentoCard rowSpan={2} title="Row-spanning card" description="Takes up two rows vertically." />
  <BentoCard title="Title" description="An ordinary card." />
  <BentoCard title="Custom content">
    <img src="/chart.png" alt="Statistics chart" />
  </BentoCard>
</BentoGrid>

Props

BentoGrid

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Put `BentoCard` children here directly
`columns`	`number`	`3`	Number of columns (1–6)
`stagger`	`number`	`0.08`	Interval between cards (seconds)
`delay`	`number`	`0`	Delay before the reveal starts (seconds)
`once`	`boolean`	`true`	Plays only the first time the element enters the viewport
`className`	`string`	—	Appended to the grid container's className

BentoCard

Prop	Type	Default	Description
`colSpan`	`number`	`1`	Number of columns spanned horizontally (1–6)
`rowSpan`	`number`	`1`	Number of rows spanned vertically (1–6)
`title`	`React.ReactNode`	—	Card title
`description`	`React.ReactNode`	—	Card description
`children`	`React.ReactNode`	—	Any custom content (charts, images, and so on), placed above the title
`className`	`string`	—	Appended to the card's className

Accessibility

When the user has "reduce motion" enabled at the system level, a static grid renders with no reveal animation and no hover offset
Card titles use semantic <h3> tags, so assistive technology can navigate by heading
The hover dimming is a purely visual cue (opacity bottoms out at 0.7), the content stays readable, and keyboard operation and focus are unaffected