Issue 042 · out this morningThe quote we lost on purpose186
Pieces published
31,904
Readers
“I did it your way for the last three quotes and two of them closed at the price on the page.”
One letter, every Tuesday
Plain text, written the night before, unsubscribe link at the top.
Read by subject
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.