StatusPage

Code

import { StatusPage, type StatusPageService } from "@fadymondy/nasaq/web";declare const services: StatusPageService[];export const Status = () => <StatusPage title="Acme status" services={services} updatedAt={Date.now()} />;

Monitoring · beta

Live examples and controls: StatusPage in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/status-page.json

What a customer sees when they check whether you are up. A banner shows the worst thing happening (operational, degraded, partial or major outage, or maintenance in progress); below it are active incidents, every service with a daily history bar and its uptime, scheduled maintenance and past incidents. Give it services, incidents and maintenance from your own data. It draws no logo: pass yours as logo. Place it in your own layout; it sets its own max width.

When to useCopy Anchor Link

• A public status site, on its own domain.
• A status section inside a help centre.

When not to useCopy Anchor Link

• The admin view with edit controls: use UptimeMonitors.
• Choosing what appears here: use StatusPageManager.

ImportCopy Anchor Link

import { StatusPage } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { StatusPage, type StatusPageService } from "@fadymondy/nasaq/web";

declare const services: StatusPageService[];

export const Status = () => <StatusPage title="Acme status" services={services} updatedAt={Date.now()} />;

AnatomyCopy Anchor Link

StatusPage                   data-slot="status-page"
├─ header                    optional logo, title (h1)
├─ banner                    role="status", overall state
├─ active incidents          IncidentList
├─ services                  name, description, status Badge, UptimeBar, uptime Badge
├─ maintenance               Timeline of upcoming windows
├─ past incidents            IncidentList
└─ footer                    your `footer`, attribution

APICopy Anchor Link

StatusPage: every div prop except children and title, plus:

ExamplesCopy Anchor Link

With a logo and a link

import { StatusPage } from "@fadymondy/nasaq/web";

export const Branded = () => (
  <StatusPage
    title="Acme status"
    logo={<img src="/acme.svg" alt="" className="size-8" />}
    services={[{ id: "web", name: "Website", status: "up" }]}
    footer={<a href="/subscribe">Subscribe to updates</a>}
  />
);

AccessibilityCopy Anchor Link

• One h1 and h2 per section. The banner is role="status". Every state is text as well as colour.
• Each history bar has a text alternative and each segment a title.
• Contrast of the banner text is the normal foreground colour: only the icon is tinted.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. The history bar runs right to left; percentages and dates keep Latin digits inside their own isolate.

Styling & tokensCopy Anchor Link

• Built on Badge, Timeline, UptimeBar and --nq-* tokens. Target [data-slot="status-page"].

Do / Don'tCopy Anchor Link

• Do put incidents above the services while they are open.
• Do give honest dates: use the real start and resolve times.
• Don't show internal names of servers: name services the way customers know them.
• Don't leave the page without updatedAt: people want to know it is fresh.

RelatedCopy Anchor Link

• uptime-monitors
• status-page-manager
• timeline

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-monitoring-status-page--docs