A postmortem archive opening on four hairline reliability figures, then listing every incident as a linked row with a tone-coded severity chip, its duration, the impact, and the fix, beside a live uptime strip.
A postmortem archive opening on four hairline reliability figures, then listing every incident as a linked row with a tone-coded severity chip, its duration, the impact and the fix, beside a live uptime strip.
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/news42?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/news42?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/news42.tsx, the indicator14 uptime piece it floats on the tile (installed to components/beste/piece/indicator14.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.
The installed file exports news42Demo alongside the block: the exact props behind the preview above. Spread it to get a working archive in one line.
import { News42, news42Demo } from "@/components/beste/block/news42";
export default function IncidentsPage() {
return <News42 {...news42Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Indicator14 } from "@/components/beste/piece/indicator14";
import { News42 } from "@/components/beste/block/news42";
export default function IncidentsPage() {
return (
<News42
badge={{ label: "Incident history" }}
heading="Everything that has gone wrong, with the date still on it"
description="We publish incidents whether or not anyone noticed, and we leave them up."
severityLabels={{ major: "Major", degraded: "Degraded", minor: "Minor" }}
summary={[
{ value: "4", label: "incidents in the last 12 months" },
{ value: "99.97%", label: "availability across the year" },
]}
incidents={[
{
date: "24 April 2026",
title: "Slow booking pages in the UK region",
severity: "degraded",
duration: "41 minutes",
impact: "The admin app was slow for one region. Member links kept working from cache.",
fix: "Rolled back the 06:40 deploy and added a query budget to the booking path.",
href: "/incidents/april-2026",
},
]}
media={<Indicator14 title="Booking service" uptime="99.97%" range="Last 45 days" />}
image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
policy="Every incident gets a write-up within 48 hours."
button={{ label: "Follow the status page", href: "/status" }}
/>
);
}| 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 |
severityLabels | Record<Severity, string> | – | The word shown on each severity chip |
summary | Summary[] | [] | Reliability figures on a hairline row |
incidents | Incident[] | [] | The archive, newest first |
media | ReactNode | – | Live asset on the sticky tile, indicator14 in the demo |
image | { src: string; alt: string } | – | Backdrop behind the media tile |
policy | string | – | Write-up and credit policy under the tile |
button | { label: string; href: string } | – | Outline status page action |
className | string | – | Extra classes for the outer section |
type Severity = "major" | "minor" | "degraded";
type ActionLink = {
label: string;
href: string;
};
type Incident = {
date: string;
title: string;
severity: Severity;
duration: string;
impact: string;
fix: string;
href: string;
};
type Summary = {
value: string;
label: string;
};impact and fix are both required on every incident, and the fix renders in text-foreground while the impact stays muted. An incident row that lists damage without a change is the thing this block is built against.severity drives the chip colour from the severityStyles table: rose for major, amber for degraded, muted for minor. Chips carry a word as well as a colour.severityLabels falls back to the raw key when a label is missing, so an incomplete record degrades to "degraded" rather than rendering blank.Link elements with md:px-4 alongside the hover fill, so the highlight extends slightly past the text on wider screens.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.tabular-nums and each carries its own border-t, so the rules are per column and stop at the gaps.news36
A press section built around a soft panel holding the standout quote and its publication, followed by hairline coverage rows that align publication, headline, and date, and a press kit action to close.
news38
A single announcement laid out like an article, with a standfirst, a full-bleed captioned photo band, a reading column, and a sticky rail carrying the key facts and related entries.
news28
Data journalism style cards with animated numbers, change indicators, progress bars, and key statistics.
news5
Vertical news timeline with timestamps, breaking news indicators, and optional article images.