A modular bento layout of mixed-size cards that stagger in on scroll and lift with a spotlight on hover.

Interfaces that feel alive

Spring-driven motion, pointer-aware surfaces, and pixel-tuned details — the same craft a senior design engineer ships by hand, ready to drop in.

60fpsReduced-motion safeThemed tokensZero config

Realtime analytics

Every interaction streamed and charted as it happens.

1.2Mevents / day

Enterprise-grade

SOC 2 Type II, SSO, and audit logs out of the box.

120ms p95 globally

Served from 35 edge regions, close to every user.

Automate the busywork

Chain triggers, conditions, and actions into flows that run themselves — no glue code.

Explore automations

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/bento-grid.json"

BentoGrid lays out BentoCards in a responsive grid. Cards stagger in with a spring as the grid scrolls into view, lift on hover, and reveal a pointer-tracked spotlight.

Usage

tsx

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

tsx

<BentoGrid columns={3}>
  <BentoCard colSpan={2} title="Wide" description="…" />
  <BentoCard rowSpan={2} title="Tall" description="…" />
  <BentoCard title="Default" description="…" />
</BentoGrid>

Pass icon, title, description, and cta for the built-in layout, or drop in your own children for full control.

Props

BentoGrid

Prop	Type	Default	Description
`columns`	`2 \| 3 \| 4`	`3`	Number of columns on large screens.

BentoCard

Prop	Type	Default	Description
`colSpan`	`1 \| 2 \| 3`	`1`	Columns the card spans on large screens.
`rowSpan`	`1 \| 2`	`1`	Rows the card spans on large screens.
`icon`	`ReactNode`	—	Leading icon / media.
`title`	`ReactNode`	—	Card heading.
`description`	`ReactNode`	—	Supporting copy.
`cta`	`ReactNode`	—	Call-to-action pinned to the bottom.

Both components forward every standard <div> attribute to their root element.

Bento Grid