Status Board

A status page in one section: the state of everything as the heading with its light (it pulses three times, then stays lit), the uptime of the days shown as a Gauge, each service with its state and a bar for every day (up, degraded, an outage, maintenance, no data) rising in turn as the board arrives, and the incidents with their updates, newest first. Pointing at a bar names its day; the days that were not clean are written out for a screen reader under each service, so nothing depends on the bars. A narrow box shows the last thirty days. All of it is data at build. Zero JavaScript.

Status

Everything is running

Updated 9 October 2026, 08:00 UTC

Sending API
Running
90 days99.98% uptimeToday
Degraded: 11 Sept
Webhooks
Running
90 days99.91% uptimeToday
Degraded: 20 Sept. Outage: 19 Sept
DashboardPlanned maintenance is announced a week ahead
Running
90 days100.00% uptimeToday
Maintenance: 25 Aug

Incidents

Webhooks delivered late
Resolved
Webhooks
1. 19 Sept, 10:42 UTC
  Every queued event has been delivered. We are adding a second queue so this cannot back up again.
2. 19 Sept, 09:05 UTC
  Events are being delivered between five and twelve minutes late. Sending is not affected.

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript of its own

0 B

Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.

CSS 15.8 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

Chrome 105 · Firefox 110 · Safari 16; needs container-units. Elsewhere: without container queries every day's bar shows at any width.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/status-board

src/pages/index.astro

---
import StatusBoard from '@/components/moonarc/pro/StatusBoard.astro';
import status from '../content/status.json';
---
<StatusBoard
  level={1}
  updated={status.updated}
  updatedText="Updated 9 October 2026, 08:00 UTC"
  services={status.services}
  incidents={status.incidents}
/>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: gauge, reveal.

Props

Prop	Type	Default	Description
`services`	`{ name; status; uptime; days; note? }[]`	none	Each service: status now (up, degraded, down, maintenance), uptime in percent over the days shown, and days, one character a day, oldest first and today last: u up, d degraded, o an outage, m maintenance, - no data.
`incidents`	`{ title; status; services?; updates: { at; text }[] }[]`	`[]`	The incidents, newest first; status is investigating, identified, monitoring or resolved; at is an ISO date and time.
`updated`	`string`	none	The day the data was written (YYYY-MM-DD): the last bar is this day. A value that is not a day stops the build.
`updatedText`	`string`	none	How the update time is printed; unset, the day as given.
`eyebrow`	`string`	none	A short line above the heading.
`headline`	`string`	none	The heading; unset, the words for the overall state ("Everything is running"). Slot "headline" wins.
`words`	`Partial<Words>`	none	Every word the board prints: the overall and per-service states, the incident states, Uptime, days, Today, Incidents, the line for none, and noData for a day with no data.
`locale`	`string`	`'en-GB'`	A BCP 47 locale for the dates.
`level`	`1 \| 2 \| 3`	`2`	Heading level of the heading; the incidents' heading is one below.
`tone`	`'surface' \| 'muted' \| 'ink' \| 'brand'`	`unset (paints nothing)`	The section's ground.
`density`	`'compact' \| 'cozy' \| 'roomy'`	`'cozy'`	Block padding ×0.8 / ×1 / ×1.25 through --ma-density.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-in.ma-sr.ma-status.ma-status__affected.ma-status__badge.ma-status__bar.ma-status__bars.ma-status__eyebrow.ma-status__foot.ma-status__gauge.ma-status__head.ma-status__headline.ma-status__ihead.ma-status__incident.ma-status__incidents.ma-status__inner.ma-status__ititle.ma-status__light.ma-status__list.ma-status__meta.ma-status__name.ma-status__note.ma-status__service.ma-status__services.ma-status__state.ma-status__subhead.ma-status__update.ma-status__updated.ma-status__updates.ma-status__uptime.ma-status__words

Slots

slot="eyebrow"slot="headline"

Reduced motion

The bars are there at once, the light stays lit without pulsing and the gauge is drawn full.

With `ClientRouter`

CSS and Reveal; the bars rise again on a fresh page.

Why it is built this way

The overall state is the worst of the services' states, worked out at build, so the heading and the light can never disagree with a row.
A bar names its day from a data attribute on hover, with no script; the same days are written out under the row (Degraded: 3 Oct. Outage: 18 Sep) for a screen reader and a keyboard, so the bars are not a row of ninety tab stops.
The light pulses three times and stays lit: a loop beside text is what WCAG 2.2.2 asks to be stoppable.
The four states have their own colours (--ma-status-up and the rest), hues that read as themselves on paper and on ink, and every state is also a word.
Static on purpose: a status page that needs the service it reports on to render is down when it matters most. Rebuild it from your monitor's export on a schedule, or link a hosted status page instead.

Replaces: Hosted status page widgets · Uptime bar sections on developer sites. See the migration table.

Bar Grow

Data

A bar chart whose bars grow from the baseline one after another when it scrolls into view; hovering a bar shows its value.

every browserscroll

Gauge

Data

A ring, a three-quarter arc or a half circle that fills to a value as it scrolls into view, the number counting up in the middle with it and a label under it.

newly · Chrome 91 · Firefox 128 · Safari 17scroll

2026-10-090.1.2 (unreleased): Endpoint, Homescreen, Estate, Practice and Stay, templates for developer products, mobile apps, estate agents, practices and places to stay, and thirty sections
- Endpoint, a template for a product with an HTTP API: a console on the home page that sends a request and streams the response back with its status, its time and its region, an API reference written at build from your OpenAPI document, a quickstart and four guides, usage pricing with a slider, a status page, the regions on a map, a changelog with a feed, search and a contact page for sales.
- Six Pro sections for it: HeroRequest, ApiReference, RegionsMap, StatusBoard, QuickstartSteps and PricingUsage.
2026-10-070.1.1: this site in Plus Jakarta Sans and JetBrains Mono
- This site sets its text in Plus Jakarta Sans and its code in JetBrains Mono, where it used Inter and Geist Mono, and its share cards are drawn in the same two faces.
- On /theme/, the editorial and technical pairings now set their body text in Plus Jakarta Sans and the technical headings in JetBrains Mono, and the CSS you copy names those fonts.
2026-10-060.1.1: the terms, privacy and refunds, checked against Indonesian law
- The terms, the privacy policy and the refund policy were read against Indonesia's consumer protection, personal data and e-commerce law, and changed where they fell short.
- Terms.

Changelog

Pro

Lists dated releases in a hairline list.