# Uptime history
> Ninety days of uptime per service as pixel columns swept in on load; hovering a day lifts that column across all services.
- Element: `<px-uptime>`
- React: `import { PxUptime } from "@/components/lumesec/px-uptime"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-uptime.json
- Page: https://elements.lumesec.ai/components/pixel-lab/uptime



Live preview: https://elements.lumesec.ai/view/px-uptime

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-uptime.js"></script>

<px-uptime></px-uptime>
```

## Installation

```bash
npx shadcn@latest add @lumesec/px-uptime
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-uptime.json
```

## Usage

React:

```tsx
import { PxUptime } from "@/components/lumesec/px-uptime";

export function Example() {
  return (
    <PxUptime />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-uptime.js"></script>

<px-uptime></px-uptime>
```

## Behaviour

Ninety days per service as pixel columns, swept in on load. Hovering a day lifts that column across every service and shows what happened.

## Accessibility

* The canvas has `role="img"` and a fixed `aria-label="Uptime for the last 90 days"`.
* Per-day details appear in a tooltip on pointer hover only; there is no keyboard access to individual days.
* Reduced motion: all columns appear at once instead of sweeping in from the left.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--card`, `--foreground`, `--lumesec` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-fg`, `--ui-mono`, `--ui-muted` and `--ui-surface`.

## Notes

* The services (API, Console, Workflows), their daily statuses, incident durations and uptime percentages are generated demo data; there is no attribute for real data.
* Each day is 5px wide, so narrow containers show fewer than 90 days; the left label states the actual count.
* The canvas is 168px tall.