TrackerNew

A row of status squares for uptime, job runs or habits; hover a square (or use the arrow keys) to read its day and note. Where it's narrow, the oldest make room.

$ pnpm dlx shadcn@latest add @dashral/tracker

APIOperational

Aug 1399.98% uptimeToday

Installation

$ pnpm dlx shadcn@latest add @dashral/tracker

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/tracker.json

When to use

How something went, one square per day or run: uptime, a job's runs, a habit.

When not to use

Amounts per day over months: Heatmap.
A trend in numbers: Sparkline or Line Chart.

Usage

Each square's label, its color for what it means, and a note to read on hover.

example.tsx

1import { Tracker } from "@/components/dashral/tracker"
2
3const days = [
4  { label: "Nov 8", note: "No incidents" },
5  { label: "Nov 9", color: "warning", note: "Slow responses for 14 minutes" },
6  { label: "Nov 10", note: "No incidents" },
7] as const
8
9export default function ApiUptime() {
10  return <Tracker data={[...days]} summary="99.98% uptime" endLabel="Today" aria-label="API uptime" />
11}

Using the npm package? Import from @dashral/ui/components/tracker instead, here and in the examples; the rest is the same.

Examples

A job's last runs

Squares for runs, not days: each label is the run, its note what happened.

Nightly export

Run #124537 of 40 succeededLast night

A habit

color="primary" for days done, neutral for days missed.

Morning run

5-day streak

Mon, Oct 1222 of 30 daysTue, Nov 10

API reference

Tracker

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`data`	`{ key?, label, color?, note? }[]` The squares, oldest first. label is what one stands for (a day, a run); color what it means (success, warning, destructive, info, primary, or neutral for no data); note what happened. Required.	—
`color`	`"success" \| "warning" \| "destructive" \| "info" \| "primary" \| "neutral"` The color of squares without their own.	`"success"`
`height`	`number` The squares' height in pixels.	`28`
`startLabel / summary / endLabel`	`ReactNode` Under the row while no square is read; null leaves one out. The start follows the oldest square showing.	`the first and last square's labels / —`
`aria-label`	`string` What it shows, e.g. “API uptime, last 90 days”.	—
`classNames`	`{ square, caption }`	—

Keyboard

Keys	Action
`Tab`	Focus the row
`←`or`→`	Read the previous or next square
`Home`or`End`	The first or last square
`Esc`	Stop reading

Accessibility

A group named by your label; the square you move to with the arrow keys is read out (its label and note).
Colors are never alone: every square's label and note can be read, by hover or by keyboard.
Right to left, the oldest square is on the right and the arrows follow what you see.

Motion

The squares rise in one after another when it first shows; reading one fades the others back, and the line under the row crossfades to it. Still with reduced motion.