# Tracker

A React component in [Beamline](https://beamline.io/)'s [Dashboard](https://beamline.io/components/dashboard) category. Live demo: https://beamline.io/components/tracker

A row of status blocks for uptime, job runs or daily checks, with tooltips and a legend.

## Use it for

- Status history over days or runs.

## Not for

- Continuous values → sparkline or [activity-heatmap](https://beamline.io/components/activity-heatmap).

## Anatomy

- title + summary
- blocks
- tooltip
- range labels
- legend

## States

- ok
- degraded
- down (taller)
- maintenance
- no data (hatched)
- right-to-left: the history keeps oldest → newest left to right (continuous time, O1 D2); ← / → move physically
- narrow: bars keep a 1 px gap below 640 px so 90 days fit 390 px without scrolling
- loading (`loading`: the strip, labels and legend as placeholders of their real height; the header shows when title or summary is given, an empty string holds its line)

## Keyboard

- The row is one tab stop (the newest block first); ←/→ (mirrored in RTL), Home and End move between blocks. Each block is spoken as "date: status, detail"; focus shows the tooltip.

## Motion

Other blocks dim on hover (180ms out).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` (required) | `{ status, label, detail? }[]` | — |  |
| `title / summary` | `string` | — |  |
| `startLabel / endLabel` | `string` | — |  |
| `legend` | `boolean` | — |  |
| `style / ref` | `CSSProperties / native Ref` | — | native HTMLDivElement |
| `classNames` | `TrackerClassNames` | — |  |
| `loading` | `boolean` | `false` | strip, labels and legend as placeholders while the history loads; title or summary "" holds the header line |

## Import

```tsx
import { Tracker } from "@/components/tracker/tracker";
```

## Get it

Tracker is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Dashboard

- [App shell](https://beamline.io/components/app-shell): The frame for every app screen: collapsible sidebar with grouped navigation, top bar and page.
- [Bar list](https://beamline.io/components/bar-list): Ranked horizontal bars with label inside and value at the end — top pages, sources, customers.
- [Category bar](https://beamline.io/components/category-bar): One bar split into labelled ranges with an optional marker that names its range.
- [Insight cards](https://beamline.io/components/insight-cards): Findings from an agent, one per page: the sentence, the series it is about with their change, a chart to scrub that names each point, and a follow-up…
- [Metric card](https://beamline.io/components/metric-card): A KPI: label, a value that rolls to each new number, the change with arrow, sign and tone, a trend line and context; unmeasured values are hatched, never…