Bento grid
ProA grid of cards of different sizes for showing what a product does, each with a live visual on top and a title and sentence below.
npx prodular-ui add bento-gridPart of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing
Two cards
A two thirds card beside a one third card. The SaaS landing block shows a full bento with live components.
$412,800
Ask about your receivables
Answers with the numbers behind them.
3 waiting
Approve in one click
Payouts wait for the right person.
import { BentoCard, BentoGrid } from "@/components/ui/bento-grid"
export default function BentoGridAi() { return ( <BentoGrid className="w-full"> <BentoCard size="lg" title="Ask about your receivables" description="Answers with the numbers behind them." visual={<div className="flex h-full items-center justify-center text-4xl font-semibold tracking-tight tabular-nums">$412,800</div>} /> <BentoCard size="sm" title="Approve in one click" description="Payouts wait for the right person." visual={<div className="flex h-full items-center justify-center text-sm text-muted-foreground">3 waiting</div>} /> </BentoGrid> )}Anatomy
<BentoGrid> <BentoCard size="lg" title="..." visual={...} /> <BentoCard size="sm" title="..." visual={...} /></BentoGrid>Guidance
Use it when
- The product's few best ideas, with a live glimpse of each.
- Rows that add up to six columns: lg plus sm, md plus md, or full.
Avoid
- Text only cards. Use Feature grid.
- More than six cards.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Sizes are sm (a third), md (half), lg (two thirds) and full. Make each row add up to the full width.
- Fill visual with real components scaled down, not screenshots.
API
BentoCard
| Prop | Type | Default | Description |
|---|---|---|---|
| size / tall | "sm" | "md" | "lg" | "full" / boolean | "sm" | Width and two rows. |
| title / description / visual | ReactNode | Content. | |
| delay | number | 0 | Stagger when scrolling in. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add bento-grid# or, with the registry in components.jsonnpx shadcn@latest add @prodular/bento-grid