Bento Grid

Asymmetric CSS grid with col/row span cells and a cursor-tracked hover spotlight on each tile.

Marketing 6-tile

Asymmetric feature grid with a 2×2 hero cell and supporting tiles.

Realtime collaboration

Sub-100ms sync across workspaces with presence and cursors.

Audit logs

Immutable event history.

SSO

SAML and OIDC ready.

Workflow automations

Trigger actions from product events without code.

Edge delivery

Global CDN footprint.

AI copilots

Context-aware suggestions.

marketing-example.tsx

1"use client";
2
3import { BentoGrid, BentoItem } from "@/registry/ui/bento-grid";
4
5function Panel({
6  title,
7  description,
8  className,
9}: {
10  title: string;
11  description?: string;
12  className?: string;
13}) {
14  return (
15    <div
16      className={`flex h-full min-h-32 flex-col justify-end p-5 ${
17        className ?? ""
18      }`}
19    >
20      <p className="text-sm font-semibold">{title}</p>
21      {description ? (
22        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
23      ) : null}
24    </div>
25  );
26}
27
28export function BentoGridMarketingExample() {
29  return (
30    <div className="mx-auto w-full max-w-5xl">
31      <BentoGrid columns={4} gap="md">
32        <BentoItem colSpan={2} rowSpan={2} className="min-h-64">
33          <Panel
34            title="Realtime collaboration"
35            description="Sub-100ms sync across workspaces with presence and cursors."
36          />
37        </BentoItem>
38        <BentoItem>
39          <Panel title="Audit logs" description="Immutable event history." />
40        </BentoItem>
41        <BentoItem>
42          <Panel title="SSO" description="SAML and OIDC ready." />
43        </BentoItem>
44        <BentoItem colSpan={2}>
45          <Panel
46            title="Workflow automations"
47            description="Trigger actions from product events without code."
48          />
49        </BentoItem>
50        <BentoItem>
51          <Panel title="Edge delivery" description="Global CDN footprint." />
52        </BentoItem>
53        <BentoItem>
54          <Panel title="AI copilots" description="Context-aware suggestions." />
55        </BentoItem>
56      </BentoGrid>
57    </div>
58  );
59}

Custom spans

Three cells with mixed column and row spans.

Hero tile

Spans two columns and rows.

Tall side

Single column, two rows.

Footer strip

Full-width bottom cell.

custom-spans-example.tsx

1"use client";
2
3import { BentoGrid, BentoItem } from "@/registry/ui/bento-grid";
4
5function Panel({
6  title,
7  description,
8  className,
9}: {
10  title: string;
11  description?: string;
12  className?: string;
13}) {
14  return (
15    <div
16      className={`flex h-full min-h-32 flex-col justify-end p-5 ${
17        className ?? ""
18      }`}
19    >
20      <p className="text-sm font-semibold">{title}</p>
21      {description ? (
22        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
23      ) : null}
24    </div>
25  );
26}
27
28export function BentoGridCustomSpansExample() {
29  return (
30    <div className="mx-auto w-full max-w-3xl">
31      <BentoGrid columns={3} gap="sm">
32        <BentoItem colSpan={2} rowSpan={2} className="min-h-48">
33          <Panel title="Hero tile" description="Spans two columns and rows." />
34        </BentoItem>
35        <BentoItem rowSpan={2} className="min-h-48">
36          <Panel title="Tall side" description="Single column, two rows." />
37        </BentoItem>
38        <BentoItem colSpan={3}>
39          <Panel title="Footer strip" description="Full-width bottom cell." />
40        </BentoItem>
41      </BentoGrid>
42    </div>
43  );
44}

Compact 2-column

Simple two-column bento for narrow layouts.

Deploy

Monitor

Analytics

Usage and billing in one view.

compact-example.tsx

1"use client";
2
3import { BentoGrid, BentoItem } from "@/registry/ui/bento-grid";
4
5function Panel({
6  title,
7  description,
8  className,
9}: {
10  title: string;
11  description?: string;
12  className?: string;
13}) {
14  return (
15    <div
16      className={`flex h-full min-h-32 flex-col justify-end p-5 ${
17        className ?? ""
18      }`}
19    >
20      <p className="text-sm font-semibold">{title}</p>
21      {description ? (
22        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
23      ) : null}
24    </div>
25  );
26}
27
28export function BentoGridCompactExample() {
29  return (
30    <div className="mx-auto w-full max-w-md">
31      <BentoGrid columns={2} gap="sm">
32        <BentoItem>
33          <Panel title="Deploy" />
34        </BentoItem>
35        <BentoItem>
36          <Panel title="Monitor" />
37        </BentoItem>
38        <BentoItem colSpan={2}>
39          <Panel
40            title="Analytics"
41            description="Usage and billing in one view."
42          />
43        </BentoItem>
44      </BentoGrid>
45    </div>
46  );
47}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/bento-grid

Props

Name	Type	Default	Description
columns	"2" \| "3" \| "4"	"4"	Responsive column preset for the grid track
gap	"sm" \| "md" \| "lg"	"md"	Gap between bento cells
colSpan	1 \| 2 \| 3 \| 4	1	BentoItem column span (responsive on smaller breakpoints)
rowSpan	1 \| 2 \| 3 \| 4	1	BentoItem row span
className	string	undefined	Extra classes on BentoGrid or BentoItem shells