The page itself: one sentence at the top, and everything else under it.
The banner is the whole design: someone opening a status page has one question and about two seconds of patience for it, so the answer is the largest thing on the screen, in a colour, with an icon that says the same thing for anyone the colour doesn't reach. worstStatus() computes it — the overall state of a system is its worst part, never its average.
Checked Sep 8, 12:00 PM
REST and GraphQL endpoints
app.example.com
<script lang="ts"> import { StatusPage, StatusService, worstStatus, type StatusPoint } from 'omaris'; function history(seed: number, blips: Record<number, StatusPoint['level']> = {}): StatusPoint[] { const today = new Date('2026-09-08T12:00:00Z'); return Array.from({ length: 90 }, (_, index) => { const date = new Date(today.getTime() - (89 - index) * 86_400_000); const level = blips[index] ?? ((index * seed) % 53 === 0 ? 'degraded' : 'operational'); return { date, level, uptime: level === 'operational' ? 100 : 96.4 }; }); } const services = [ { name: 'API', description: 'REST and GraphQL endpoints', history: history(7) }, { name: 'Dashboard', description: 'app.example.com', history: history(11, { 84: 'degraded' }) }, { name: 'Webhooks', history: history(13) } ];</script><StatusPage level={worstStatus(services.map((service) => service.history.at(-1)!.level))} updatedAt={new Date('2026-09-08T12:00:00Z')} class="w-full"> <div class="flex flex-col rounded-shape-lg border border-border px-4"> {#each services as service (service.name)} <StatusService {...service} class="border-b border-border last:border-b-0" /> {/each} </div></StatusPage>A status page that shows only today answers "is it working now" and nothing else; the bar answers "is it usually working", which is the question anyone reading one actually has. How many days fit is measured rather than guessed — the track draws as many bars as it can at a readable width and drops the oldest — so the same row is ninety days wide and three weeks narrow with no breakpoint anywhere. Hover a bar for the day.
Outbound delivery
<script lang="ts"> import { StatusService, type StatusPoint } from 'omaris'; const today = new Date('2026-09-08T12:00:00Z'); const bad: Record<number, StatusPoint['level']> = { 61: 'degraded', 86: 'major', 87: 'partial' }; const history: StatusPoint[] = Array.from({ length: 90 }, (_, index) => { const date = new Date(today.getTime() - (89 - index) * 86_400_000); const level = bad[index] ?? 'operational'; return { date, level, uptime: level === 'operational' ? 100 : level === 'major' ? 21.4 : 96.8, note: level === 'operational' ? undefined : 'Elevated error rates in eu-west' }; });</script><div class="flex w-full flex-col rounded-shape-lg border border-border px-4"> <StatusService name="Webhooks" description="Outbound delivery" {history} class="border-b border-border" /> <StatusService name="Documentation" history={history.map((day) => ({ ...day, level: 'operational', uptime: 100 }))} density="compact" /></div>Newest first, because the question is always "what is happening now" and the answer should not be at the bottom of a scroll. The older updates stay, in order, because the second question is "how long has this been going on" — and a page that overwrites its own history every twenty minutes cannot answer either one afterwards. The badge follows the most recent update.
A connection pool exhausted after a bad deploy. Rolling back.
We are seeing a rise in 5xx responses on the API and are looking into it.
The queue is empty. Every delayed webhook was sent.
The rollback is out and the backlog is draining.
A backlog is building on the eu-west delivery queue.
<script lang="ts"> import { StatusIncident } from 'omaris';</script><div class="flex w-full flex-col gap-8"> <StatusIncident title="Elevated error rates on the API" level="major" startedAt={new Date('2026-09-08T11:40:00Z')} services={['API', 'Dashboard']} updates={[ { at: new Date('2026-09-08T11:40:00Z'), stage: 'investigating', body: 'We are seeing a rise in 5xx responses on the API and are looking into it.' }, { at: new Date('2026-09-08T12:02:00Z'), stage: 'identified', body: 'A connection pool exhausted after a bad deploy. Rolling back.' } ]} /> <StatusIncident title="Webhook delivery delayed in eu-west" level="partial" startedAt={new Date('2026-09-06T08:12:00Z')} services={['Webhooks']} muted updates={[ { at: new Date('2026-09-06T08:12:00Z'), stage: 'investigating', body: 'A backlog is building on the eu-west delivery queue.' }, { at: new Date('2026-09-06T09:20:00Z'), stage: 'monitoring', body: 'The rollback is out and the backlog is draining.' }, { at: new Date('2026-09-06T10:05:00Z'), stage: 'resolved', body: 'The queue is empty. Every delayed webhook was sent.' } ]} /></div>emphasis is how loudly the banner is drawn: tonal for a status page, solid for a wallboard across a room, quiet for a strip inside an app that is not about status. StatusIndicator is the same state at dot size — the label ships by default, because a page whose whole message is a colour has no message for a good share of the people looking at it.
Checked Sep 8, 12:00 PM
Checked Sep 8, 12:00 PM
Live
<script lang="ts"> import { StatusIndicator, StatusPage } from 'omaris';</script><div class="flex w-full flex-col gap-3"> <StatusPage level="major" emphasis="solid" updatedAt={new Date('2026-09-08T12:00:00Z')} /> <StatusPage level="degraded" emphasis="tonal" updatedAt={new Date('2026-09-08T12:00:00Z')} /> <StatusPage level="operational" emphasis="quiet" updatedLabel="Live" /> <div class="flex flex-wrap items-center gap-5 pt-1"> <StatusIndicator level="operational" /> <StatusIndicator level="degraded" pulse /> <StatusIndicator level="major" label="us-east-1" pulse /> <StatusIndicator level="maintenance" size="sm" /> </div></div>Every part is reachable through classes: the banner's radius, the icon disc, the height of the bars and their corners. class still covers the root, and title and updatedLabel replace the sentences the level would otherwise write.
Updated a moment ago
<script lang="ts"> import { StatusPage, StatusService, type StatusPoint } from 'omaris'; const today = new Date('2026-09-08T12:00:00Z'); const history: StatusPoint[] = Array.from({ length: 90 }, (_, index) => { const date = new Date(today.getTime() - (89 - index) * 86_400_000); const level: StatusPoint['level'] = index >= 88 ? 'degraded' : 'operational'; return { date, level, uptime: level === 'operational' ? 100 : 97.2 }; });</script><StatusPage level="degraded" title="Two regions are slow" updatedLabel="Updated a moment ago" class="w-full gap-3" classes={{ banner: 'rounded-shape-sm', mark: 'rounded-shape-sm' }}> <StatusService name="eu-west" level="degraded" {history} legend="3 months ago" classes={{ track: 'h-12', bar: 'rounded-shape-xs' }} /></StatusPage>