Status Page
Freev1.0.0System status, the live incident, 90-day uptime per component and update subscriptions.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { StatusPage, type StatusRegion } from "@/components/ui/notchset/blocks/status-page";
export function Status({ regions }: { regions: StatusRegion[] }) {
return (
<StatusPage
site="STATUS.ACME.DEV"
updated="10:52 UTC"
regions={regions}
onSubscribe={(email) => fetch("/api/status/subscribe", { method: "POST", body: JSON.stringify({ email }) }).then((r) => {
if (!r.ok) throw new Error("subscribe failed");
})}
/>
);
}Props
site / updated–string / stringThe line above the headline.
regions–{ id, label, components, incident?, past? }[]Two or more add a region control. components carry 90 day records; an incident lists its updates newest first.
components[].days–{ label, kind?, minutes?, note? }[]kind marks a degraded or outage day; minutes count against uptime, floored so it never rounds up to 100%.
onSubscribe / onUnsubscribe–(email) => PromiseAdds the subscribe form; resolve to show SUBSCRIBED.
incidentAction–ReactNodeExtra controls inside the incident card (posting an update from an admin view).
Anatomy
- The headline comes from the components: any outage is a major outage, anything else not operational is degraded.
- Uptime is worked out from each day's minutes.
- A resolved incident stays on the page, marked resolved.
StatusPagedata-slot="status-page"Overall state, incident, components, past incidents and subscription.
Source
components/ui/notchset/blocks/status-page.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/status-page.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/status-page.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add class-variance-authority@^0.7 - 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/blocks/status-page.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- lib/beautiful-ui/notchset/button-variants.ts
- lib/beautiful-ui/notchset/field-classes.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), Segmented Control, the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Your product's public status page
- An in-app health view of the services a customer relies on
Use something else when
- Internal metrics dashboards: use charts
- Per-request debugging: use Webhooks or traces
Mistakes to avoid
- Floor uptime, never round: 99.996% is 99.99%, not 100%
- Post updates while investigating, not only when resolved
Agents find it by
- status page, system status, uptime, incident, outage, service health, statuspage, status history, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/status-page.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ← →
- Change region
- Enter / Space
- Show earlier updates or past incidents
- Enter
- Subscribe from the email field
Accessibility
- The headline is announced as the state changes; each strip is an image labelled with its uptime and incident count
- Earlier updates and past incidents are buttons with aria-expanded; folded content is inert
- The subscribe field is labelled, marks invalid input and its message is announced
Motion
- Strips
- Bars grow up 4ms apart; a hovered day inks and names itself
- Incident
- A new update rises in; earlier ones unroll in 380ms
- Overall
- The dot pulses in signal while anything is down
Responsive
- Under 620px (container width) each strip moves under its component's name; past incidents drop the duration under 520px.
Performance
- 90 spans per component; nothing runs while idle except the status dot's pulse.
Changelog
v1.0.0 · 2026-10-04
First release
