# System status

> Overall status, 60-day uptime per service and incident history.

Block · Free · https://lodeui.com/blocks/system-status

## When to use

- Status pages and trust centers.

## When not to use

- Internal monitoring with live metrics.

## Installation

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

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SystemStatus } from "@/components/blocks/system-status";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <SystemStatus />
    </main>
  );
}
```

Built from: Timeline, Uptime bar

## API reference

### SystemStatus

A public status block: overall state, 60-day uptime per service and incident history. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Accessibility

- Uptime bars have text summaries; incidents are a list with dates.

## Motion

- Incidents stagger in.

## Responsive behavior

- Bars shrink to fit at 320px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Use the status-page template for a full page with header and subscribe.

## Related

- [Uptime bar](https://lodeui.com/components/uptime-bar) — Daily status bars with uptime percentage and incident tooltips.
- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [Status page](https://lodeui.com/templates/status-page) — A public status page with subscribe, uptime per service and incident history.