A monthly round-up grouped into what shipped, what broke, and what is still undecided, each entry a linked hairline row, beside a sticky tile floating the month's live figures.
A monthly round-up grouped into what shipped, what broke and what is still undecided, each entry a linked hairline row, beside a sticky tile floating the month's live figures.
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/news40?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/news40?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/news40.tsx, the dashboard33 metrics piece it floats on the tile (installed to components/beste/piece/dashboard33.tsx), and the badge23 and button21 components it uses for the eyebrow and the actions.
The installed file exports news40Demo alongside the block: the exact props behind the preview above. Spread it to get a working digest in one line.
import { News40, news40Demo } from "@/components/beste/block/news40";
export default function DigestPage() {
return <News40 {...news40Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Dashboard33 } from "@/components/beste/piece/dashboard33";
import { News40 } from "@/components/beste/block/news40";
export default function DigestPage() {
return (
<News40
badge={{ label: "Monthly digest" }}
issueLabel="Issue 12 · May 2026"
heading="May in about three minutes"
description="Everything that shipped, everything that broke, and one decision we are still arguing about."
sections={[
{
label: "Shipped",
summary: "Four things went out, one after eleven weeks of testing.",
entries: [
{
title: "Multi-site capacity sharing",
detail: "Four clinics can share one waiting list while keeping their own rules.",
href: "/news/multi-site",
},
],
},
{
label: "Broke",
summary: "One incident, forty-one minutes, and the write-up is public.",
entries: [
{
title: "Slow booking pages for one region",
detail: "A 06:40 deploy degraded the booking service in the UK region.",
href: "/news/incident-april",
},
],
},
]}
media={
<Dashboard33
title="May, on the platform"
range="1 to 31 May"
items={[{ label: "Bookings", value: "18.4k", delta: "+9%", direction: "up" }]}
/>
}
image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
mediaCaption="The same three numbers every month, so you can watch them move."
buttons={[
{ label: "Read the full issue", href: "/digest/12" },
{ label: "Get it by email", href: "/subscribe" },
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow at the top left, rendered through Badge23 |
issueLabel | string | – | Issue and month line, opposite the eyebrow |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
sections | DigestSection[] | [] | Groups of entries, each with a one-line summary |
media | ReactNode | – | Live asset on the sticky tile, dashboard33 in the demo |
image | { src: string; alt: string } | – | Backdrop behind the media tile |
mediaCaption | string | – | Caption under the tile |
buttons | ActionLink[] | [] | Actions, first solid and the rest outlined |
className | string | – | Extra classes for the outer section |
type ActionLink = {
label: string;
href: string;
};
type Entry = {
title: string;
detail: string;
href: string;
};
type DigestSection = {
label: string;
summary: string;
entries: Entry[];
};summary is required on every section and sits inline beside the label on a shared baseline, so each group states its own scale before you read the entries.Link elements with md:px-4 alongside the hover fill, so the highlight extends slightly past the text on wider screens.mb-10 with last:mb-0, and entries carry border-t, so rules appear between entries and above the first one in each section.lg:sticky lg:top-24 lg:self-start. The self-start is required, otherwise the column stretches to the row height and sticky has nothing to travel within.issueLabel sits opposite the eyebrow at the top rather than in the body, which is the convention this set uses for dated documents.1.8fr to 1fr split, giving the digest most of the width while the figures tile stays only as wide as it needs.news24
Newsletter signup sidebar with featured story and additional headlines. Sticky subscription form.
news28
Data journalism style cards with animated numbers, change indicators, progress bars, and key statistics.
news16
Compact quick news list with bullet points, source attribution, and external link indicators. Perfect for news digests.