A six-column mosaic that carries a whole publication at once: the newest piece as a photographic tile, two counted figures, a reader quote, an inverted subscribe cell and a row of subject chips.
A six-column mosaic that carries a whole publication at once: the newest piece as a photographic tile, two counted figures, a reader quote, an inverted subscribe cell and a row of subject chips.
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/bento14?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/bento14?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/bento14.tsx, the badge6 component used for the eyebrow and the button1 seal button in the subscribe cell.
The installed file exports bento14Demo alongside the block: the exact props behind the preview above. Spread it to get a working hub mosaic in one line.
import { Bento14, bento14Demo } from "@/components/beste/block/bento14";
export default function HubPage() {
return <Bento14 {...bento14Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Bento14 } from "@/components/beste/block/bento14";
export default function HubPage() {
return (
<Bento14
eyebrow="The whole thing"
heading="Everything on one page"
lead={{
meta: "Issue 042 · out this morning",
title: "The quote we lost on purpose",
image: { src: "/covers/042.jpg", alt: "An estimate on a desk" },
href: "/letters/042",
}}
counts={[
{ value: "186", label: "Pieces published" },
{ value: "31,904", label: "Readers" },
]}
quote={{ text: "Two of them closed at the price on the page.", name: "A reader, in March" }}
subscribe={{
title: "One letter, every Tuesday",
description: "Plain text, unsubscribe link at the top.",
button: { label: "Subscribe", href: "/subscribe" },
}}
topicsLabel="Read by subject"
topics={[{ label: "Pricing", href: "/subjects/pricing" }]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Badge6 label above the hairline rule |
heading | string | – | Section heading under the rule |
lead | LeadPiece | – | The newest piece, as the wide photographic tile |
counts | CountCell[] | [] | Small figure cells beside the lead |
quote | QuoteCell | – | Reader quote cell |
subscribe | SubscribeCell | – | Inverted cell with the seal button |
topicsLabel | string | – | Label in the subject cell |
topics | TopicLink[] | [] | Subject chips |
className | string | – | Extra classes for the outer section |
type LeadPiece = {
meta: string;
title: string;
image: LeadImage;
href: string;
};
type CountCell = {
value: string;
label: string;
};
type QuoteCell = {
text: string;
name: string;
};
type SubscribeCell = {
title: string;
description: string;
button: { label: string; href: string };
};
type TopicLink = {
label: string;
href: string;
};
type LeadImage = {
src: string;
alt: string;
};md:auto-rows-[minmax(13rem,auto)], and each cell states its own span. The lead takes four columns and two rows, which is what makes it read as the front page of the section.bg-muted/50 cells, and a single inverted bg-foreground cell for the subscribe call. Nothing is outlined, so the mosaic stays one object.Button1 in its primary tone, the variant meant for a dark cell.quote or counts leaves the rest of the grid intact, since spans are declared per cell rather than by position.md the whole thing is a single column in source order, lead first.bento9
Magazine mosaic whose cover story fills a two-row photographic tile with its category and page count on the scrim, beside an inverted figure tile, a bordered publication note and three soft article tiles.
bento12
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.
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.
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.