Skip to content
garn

Tracker

A strip of tone-coloured blocks showing a status history — uptime, SLA, or health over time.

Stablev0.4.2added in v0.2.0@garn/ui/tracker
On this page

Default

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.

terminal
npx garn-ui add tracker
First time? Set up garn in your project
Registry
tracker
Deps
None
Registry deps
utils

Import

import { Tracker } from "@garn/ui/tracker";

Props

The component's public props and their types.

itemsRequired
Description
The status blocks, oldest to newest — one per interval, rendered left to right.
Type
TrackerItem[]

Plus 279 inherited native <div> attributes.

Styling

Target these data-slots and states, and remap these tokens, to restyle without forking the component.

[data-slot="tracker"][data-slot="tracker-block"]

When to use

Show a categorical status history over time — uptime, incidents, SLA windows, run health.

Reach for something else when

  • A numeric trend (use Sparkline)
  • a single current status (use Badge)
  • a proportion (use Progress/CategoryBar).

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

Do
  • Give the strip an aria-label summary and each block a title.
  • Use the semantic tones so status meaning is consistent with the rest of the system.
Don't
  • Don't rely on colour alone — keep the per-block title and the summary label.
  • Don't encode magnitude in block size — Tracker is categorical.

Troubleshooting

Screen readers get nothing useful.

Cause. role=img with no aria-label.

Fix. Pass an aria-label that summarises the strip.

Accessibility

Role
img
A1.1.1Non-text Content
  • 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.