A six-column bento mixing a lead card whose image tile floats a live metrics panel, a soft statement tile, an inverted figure tile, a second asset tile carrying an uptime strip, a hairline inclusion list, and a captioned photograph.
A six-column bento mixing a lead card whose image tile floats a live metrics panel, a soft statement tile, an inverted figure tile, a second asset tile carrying an uptime strip, a hairline inclusion list and a captioned photograph.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/bento11?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/bento11?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/bento11.tsx, the dashboard33 and indicator14 pieces it floats on the two asset tiles (installed to components/beste/piece/{name}.tsx), and the badge23 component it uses for the eyebrow.
The installed file exports bento11Demo alongside the block: the exact props behind the preview above. Spread it to get a working mosaic in one line.
import { Bento11, bento11Demo } from "@/components/beste/block/bento11";
export default function Page() {
return <Bento11 {...bento11Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Bento11 } from "@/components/beste/block/bento11";
import { Dashboard33 } from "@/components/beste/piece/dashboard33";
import { Indicator14 } from "@/components/beste/piece/indicator14";
export default function Page() {
return (
<Bento11
badge={{ label: "The whole surface" }}
heading="One workspace, seen from six angles"
description="Every tile below is the same data, read by a different person."
lead={{
kicker: "Overview",
title: "The week, already counted",
description: "Bookings, no-shows, and clinical hours are totalled as the work happens.",
media: (
<Dashboard33
title="This week"
range="Mon to Sun"
items={[{ label: "Booked", value: "142", delta: "+9", direction: "up" }]}
/>
),
image: { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" },
}}
statement={{
title: "Built for the eleven people who touch a record",
description: "Roles read like jobs and every change writes itself into the log.",
}}
figure={{ value: "99.95%", title: "availability we sign for" }}
asset={{
kicker: "Reliability",
title: "Published, not promised",
description: "Forty-five days of service history, updated hourly.",
media: <Indicator14 title="Booking service" uptime="99.98%" range="Last 45 days" />,
}}
list={{ title: "Included on every plan", items: ["Multi-site rota", "Audit log"] }}
photo={{
caption: "Bramble Health, Bristol",
image: { src: "/clinic/reception.jpg", alt: "A clinician in a bright clinic" },
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the hairline rule, rendered through Badge23 |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
lead | MediaTile | – | Large card, four columns wide and two rows tall |
statement | StatementTile | – | Soft two-column tile of copy |
figure | FigureTile | – | Inverted two-column tile carrying one number |
asset | MediaTile | – | Three-column card with a second live asset |
photo | PhotoTile | – | Two-column photograph with a gradient caption |
list | ListTile | – | One-column hairline list of inclusions |
className | string | – | Extra classes for the outer section |
type TileImage = {
src: string;
alt: string;
};
type MediaTile = {
kicker: string;
title: string;
description: string;
media: ReactNode;
image?: TileImage;
};
type StatementTile = {
title: string;
description: string;
};
type FigureTile = {
value: string;
title: string;
};
type PhotoTile = {
caption: string;
image: TileImage;
};
type ListTile = {
title: string;
items: string[];
};auto-rows-[minmax(14rem,auto)], so rows have a floor but still grow for long copy. The lead card takes col-span-4 row-span-2, and the remaining spans (2, 2, 3, 1, 2) are what make the rows add up.md every span collapses and the tiles stack in source order: lead, statement, figure, asset, list, photo.h-64 on mobile but md:h-auto md:flex-1 from md, so it absorbs the extra height of the two-row span rather than leaving a gap under the copy.bg-card with a border for the asset cards, bg-muted for the statement, and bg-foreground for the figure. The inverted tile uses fixed background text tokens, since its surface is fixed.justify-end, so the caption sits at the bottom regardless of the tile's final height.last:border-b, so it reads as a small table rather than an open list.bento3
Work mosaic on a six-column track mixing photographic tiles that carry their caption inside on a gradient scrim with a soft statement tile and an inverted figure tile, the lead project spanning four columns and two rows.
bento4
Service mosaic whose lead tile floats a photo-strip media piece over a dotted field between its eyebrow and statement, beside a photographic tile captioned on its scrim, an inverted figure tile and three soft icon tiles.
bento2
Studio mosaic whose lead tile floats a mood-board media piece over a dotted field between its own eyebrow and statement, beside a photographic tile captioned on its scrim, an inverted figure tile, a soft quote tile and a bordered CTA tile.
bento13
A six-column bento for getting started: a wide card floating a live step tracker, a numbered week list on hairlines, an inverted quote tile, and a capture card holding a working email row.