# Status page

> A public status page with subscribe, uptime per service and incident history.

Template · Free · https://lodeui.com/templates/status-page

## When to use

- Hosting a status page on your own domain.

## When not to use

- Internal dashboards.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/status-page.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/status/page.tsx
import { StatusPage } from "@/components/templates/status-page";

export default function Status() {
  return <StatusPage />;
}
```

Built from: Button, Input, Popover, System status

## API reference

### StatusPage

A complete public status page: branded header, subscribe popover, status block and footer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach Subscribe |
| Esc | Close the subscribe popover |

## Accessibility

- The subscribe field is labelled; the popover returns focus on close.

## Motion

- Incidents stagger in.

## Responsive behavior

- Fits 320px.

## Performance

- Mostly static; render it on the server with your data.

## Notes for AI

- Feed system-status with your monitoring data.

## Related

- [System status](https://lodeui.com/blocks/system-status) — Overall status, 60-day uptime per service and incident history.
- [Uptime bar](https://lodeui.com/components/uptime-bar) — Daily status bars with uptime percentage and incident tooltips.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.