A six-column bento of proof: a row of figure tiles with the first inverted, a tall card whose image tile floats a live breakdown chart, a tile carrying a customer quote card, and a soft note on method.
A six-column bento of proof: a row of figure tiles with the first inverted, a tall card whose image tile floats a live breakdown chart, a tile carrying a customer quote card and a soft note on method.
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/bento12?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/bento12?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/bento12.tsx, the chart7 and socialproof26 pieces it floats on two of the tiles (installed to components/beste/piece/{name}.tsx), and the badge23 component it uses for the eyebrow.
The installed file exports bento12Demo alongside the block: the exact props behind the preview above. Spread it to get a working mosaic in one line.
import { Bento12, bento12Demo } from "@/components/beste/block/bento12";
export default function Page() {
return <Bento12 {...bento12Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Bento12 } from "@/components/beste/block/bento12";
import { Chart7 } from "@/components/beste/piece/chart7";
import { Socialproof26 } from "@/components/beste/piece/socialproof26";
export default function Page() {
return (
<Bento12
badge={{ label: "Evidence" }}
heading="What changes, measured rather than promised"
description="Every tile here comes from practices running it today."
figures={[
{
value: "18 min",
title: "saved on every intake",
description: "Median across eleven practices in their first quarter.",
},
{
value: "38%",
title: "lower software spend",
description: "Measured against the tools each practice retired.",
},
{
value: "4 hrs",
title: "to the first live clinic",
description: "Mean time from signature to a real booking.",
},
]}
chart={{
kicker: "Utilisation",
title: "Where a normal week actually goes",
media: (
<Chart7
title="Where the week went"
caption="Booked hours by appointment type"
items={[{ label: "Consultations", percent: 42 }]}
/>
),
image: { src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" },
}}
quote={{
media: (
<Socialproof26
quote="We moved eleven years of records over a weekend."
name="Elena Rourke"
role="Practice lead, Bramble Health"
avatar={{ src: "/people/elena.jpg", alt: "Portrait of Elena Rourke" }}
/>
),
}}
note={{
title: "How we count",
description: "Every figure on this page has a written method.",
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Centered eyebrow above the heading, rendered through Badge23 |
heading | string | – | Section heading, centered and capped at max-w-2xl |
description | string | – | Centered supporting paragraph, capped at max-w-xl |
figures | FigureTile[] | [] | Figure tiles across the top row, the first one inverted |
chart | AssetTile | – | Tall card with a live asset and a caption block |
quote | QuoteTile | – | Tile holding a quote card, with no copy of its own |
note | NoteTile | – | Soft tile carrying the method note |
className | string | – | Extra classes for the outer section |
type TileImage = {
src: string;
alt: string;
};
type FigureTile = {
value: string;
title: string;
description: string;
};
type AssetTile = {
kicker: string;
title: string;
media: ReactNode;
image?: TileImage;
};
type QuoteTile = {
media: ReactNode;
image?: TileImage;
};
type NoteTile = {
title: string;
description: string;
};index === 0 switches the tile to bg-foreground and swaps every text token inside it to a fixed background value. Reordering figures moves the emphasis.col-span-4 row-span-2 and its tile is md:h-auto md:flex-1, so the tile absorbs the extra height of the two-row span rather than leaving a gap under the caption.quote carries no copy of its own by design. It is a bare tile whose entire content is the piece, which is what lets the testimonial keep its own card styling inside the mosaic.bg-card with a border for evidence, bg-foreground for the lead figure, and bg-muted for the quote and the note.md all spans collapse and tiles stack in source order: figures, chart, quote, note.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.
bento11
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.
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.
bento6
Product mosaic pairing a two-row hero photograph captioned on its scrim with a tall specification tile, then two square macro tiles that carry their caption inside and an inverted figure tile closing the row.