# StatusPage
> The public status page - an overall banner, each service with a daily history bar and uptime, active and past incidents with their updates, and scheduled maintenance. No admin controls and no sign-in.
Source: https://docs.nasaqui.com/components/status-page
## Install
```bash
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 use
- A public status site, on its own domain.
- A status section inside a help centre.
## When not to use
- The admin view with edit controls: use `UptimeMonitors`.
- Choosing what appears here: use `StatusPageManager`.
## Import
```tsx
import { StatusPage } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```
## Quick start
```tsx
import { StatusPage, type StatusPageService } from "@fadymondy/nasaq/web";
declare const services: StatusPageService[];
export const Status = () => ;
```
## Anatomy
```
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
```
## API
**StatusPage**: every `div` prop except `children` and `title`, plus:
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` | required | Product or company name. |
| `logo` | `ReactNode` | | Your own mark. Nothing is drawn if left out. |
| `services` | `readonly StatusPageService[]` | required | `{ id, name, description?, status, days?, uptime? }`. `days` is the daily result, oldest first (usually 90). |
| `incidents` | `readonly Incident[]` | `[]` | Open ones show first, resolved ones under Past incidents. |
| `maintenance` | `readonly StatusPageMaintenance[]` | `[]` | `{ id, title, startsAt, endsAt, description? }`. A window that is running turns the banner to maintenance. |
| `updatedAt` | `Date \| number \| string` | | Shown in the banner. |
| `footer` | `ReactNode` | | For example a subscribe link. |
| `labels` | `Partial` | | Override any string. |
## Examples
**With a logo and a link**
```tsx
import { StatusPage } from "@fadymondy/nasaq/web";
export const Branded = () => (
}
services={[{ id: "web", name: "Website", status: "up" }]}
footer={Subscribe to updates}
/>
);
```
## Accessibility
- 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 & i18n
- 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 & tokens
- Built on `Badge`, `Timeline`, `UptimeBar` and `--nq-*` tokens. Target `[data-slot="status-page"]`.
## Do / Don't
- 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.
## Related
- [`uptime-monitors`](https://docs.nasaqui.com/components/uptime-monitors)
- [`status-page-manager`](https://docs.nasaqui.com/components/status-page-manager)
- [`timeline`](https://docs.nasaqui.com/components/timeline)
## Lab
https://docs.nasaqui.com/?path=/docs/components-monitoring-status-page--docs
## Code
### React
```tsx
import { StatusPage, type StatusPageService } from "@fadymondy/nasaq/web";
declare const services: StatusPageService[];
export const Status = () => ;
```
### shadcn
```tsx
import { StatusPage, type StatusPageService } from "@/components/ui/status-page";
declare const services: StatusPageService[];
export const Status = () => ;
```
### Vue
```vue
Subscribe to updates
```
### Blade
```blade
@php
$days = fn (array $bad = []) => collect(range(0, 89))->map(fn ($i) => $bad[$i] ?? 'up')->all();
$services = [
['id' => 'web', 'name' => 'Website', 'description' => 'Storefront and checkout', 'status' => 'up', 'days' => $days([40 => 'degraded']), 'uptime' => 99.98],
['id' => 'api', 'name' => 'API', 'status' => 'degraded', 'days' => $days([70 => 'down', 71 => 'degraded', 89 => 'degraded']), 'uptime' => 99.41],
['id' => 'mail', 'name' => 'Email delivery', 'status' => 'up', 'days' => $days(), 'uptime' => 100],
];
$incidents = [
['id' => 'i1', 'title' => 'Elevated API latency', 'status' => 'monitoring', 'impact' => 'minor', 'startedAt' => '2026-09-29T07:00:00Z', 'services' => ['API'],
'updates' => [['at' => '2026-09-29T08:00:00Z', 'status' => 'monitoring', 'body' => 'A fix is out and we are watching the numbers.']]],
['id' => 'i2', 'title' => 'Checkout errors', 'status' => 'resolved', 'impact' => 'major', 'startedAt' => '2026-09-09T09:00:00Z', 'resolvedAt' => '2026-09-09T09:42:00Z'],
];
$maintenance = [['id' => 'm1', 'title' => 'Database upgrade', 'description' => 'Read-only for about ten minutes.', 'startsAt' => '2026-10-02T09:00:00Z', 'endsAt' => '2026-10-02T10:00:00Z']];
@endphp
Subscribe to updates
```
### HTML + Alpine
```html