Tracker
A strip of tone-coloured blocks showing a status history — uptime, SLA, or health over time.
@garn/ui/trackerDefault
60-day uptime — mostly healthy with an outage + degraded days.
Statuses
A short run mixing all tones incl. a neutral no-data block.
Installation
garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.
npx garn-ui add tracker- Registry
tracker- Source
- tracker.tsx
- Deps
- None
- Registry deps
utils
Import
import { Tracker } from "@garn/ui/tracker";Props
Generated from the component's TypeScript types.
itemsRequired- Description
- No description.
- Type
TrackerItem[]
Plus 279 inherited native <div> attributes.
Styling
Target these data-slots and remap these tokens to restyle without forking the component.
[data-slot="tracker"][data-slot="tracker-block"]Overview
Tracker is the status-page strip: a dense row of small blocks, each coloured by a status tone, that reads as an at-a-glance history — 90 days of uptime, a run of health checks, an SLA window. It's the ops counterpart to a sparkline: shape over time, but categorical (good/degraded/down) rather than numeric.
Guidelines
Summarise in the label. The strip is one role=img; give it an aria-label that states the takeaway ("99.2% uptime over 90 days") — a screen-reader user shouldn't have to infer it from colours.
Lean on tone, not colour alone. Blocks use the semantic tones (success/warning/danger/neutral), and each carries a hover title with the date + status so the detail is reachable without relying on hue.
Keep blocks uniform. Equal-width blocks with a tiny gap read as a timeline; don't vary size to encode a second dimension — that's a different chart.
Best practices
- Give the strip an
aria-labelsummary and each block atitle. - Use the semantic tones so status meaning is consistent with the rest of the system.
- Don't rely on colour alone — keep the per-block
titleand the summary label. - Don't encode magnitude in block size — Tracker is categorical.
Accessibility
- Role
img
- • role=img with an `aria-label` summary (e.g. "99.2% uptime, 90 days") — pass one; the blocks alone don't convey the summary.
- • Each block carries a hover `title` (date + status) and reflects `data-tone`.
- • Tone maps to the semantic success/warning/danger/info/neutral tokens.
- Status
- Stable
- Version
v0.3.0- Introduced
v0.2.0
garn doesn't yet record a per-release version history. This reflects the component's current lifecycle state; full changelog entries will appear once the metadata pipeline emits a lifecycle.history field.