# Uptime bar

> Daily status bars with uptime percentage and incident tooltips.

Component · Pro · https://lodeui.com/components/uptime-bar

## When to use

- Status pages and service health over 30–90 days.

## When not to use

- Live latency: use a line chart.

## Installation

```bash
npx shadcn@latest add @lode/uptime-bar
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { UptimeBar } from "@/components/ui/uptime-bar";

export function Api({ days }: { days: { date: string; status: "up" | "degraded" | "down" | "none" }[] }) {
  return <UptimeBar name="API" days={days} />;
}
```

## API reference

### UptimeBar

One bar per day with an uptime percentage.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name | `string` | – | Service name. |
| days | `{ date; status; note? }[]` | – | status: up, degraded, down or none. |

## Accessibility

- role="img" with a summary; each bar has a label with date, status and note.

## Motion

- Hovering a bar dims the others.

## Responsive behavior

- Bars shrink to fit; show fewer days on phones.

## Performance

- One element per day.

## Notes for AI

- Use none for days before monitoring started.

## Related

- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.
- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.