Tracker (uptime)

Status over time (uptime bars): one block per period, tooltip per block (hover, or focus + arrow keys), uptime summary. Status names are in the tooltip and table, not color alone.

Import

import { Tracker } from '@marbleui/ui'

Props

<Tracker>

Prop	Type	Default
blocks *required	`TrackerBlock[]`	`—`
summary *required	`string`	`—`
className	`string`	`—`
title	`string`	`—`

Usage notes

Status per period as a row of coloured blocks, like the uptime bar on a status page. For a single live state use StatusIndicator.

<Tracker
  title="API · last 90 days"
  summary="Operational on 87 of 90 days; one 42-minute outage on Sep 8."
  blocks={days.map((d) => ({ label: d.date, status: d.status, note: d.incident }))}
/>

status is ok, degraded, down or none (no data), drawn in the success, warning, danger and border colours. The status word appears in the tooltip and the “Show data” table, so colour isn’t the only cue.
The uptime figure in the header counts ok blocks against all blocks except none, so degraded periods lower it.
Tooltips open on hover, or on keyboard: Tab focuses the strip and shows the first block, arrow keys step through blocks (Home/End jump to the ends, Escape hides), and a live region reads each one. Still name the incidents in summary.
Blocks share the width evenly; only the first and last label are printed under the bar.

Example source · show

import { Tracker, type TrackerBlock } from './tracker'

const blocks: TrackerBlock[] = Array.from({ length: 60 }, (_, i) => {
  const d = new Date(2026, 7, 22 + i)
  const label = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
  if (i === 17) return { label, status: 'down', note: 'API outage, 42 min' }
  if (i === 18 || i === 44) return { label, status: 'degraded', note: 'Elevated latency' }
  return { label, status: 'ok' }
})
export const styles = { Default: () => <Tracker className="w-[34rem] max-w-full" title="API · last 60 days" summary="API operational on 57 of 60 days; one 42-minute outage on Sep 8 and two days of elevated latency." blocks={blocks} /> }

Source: packages/ui/src/tracker/tracker.tsx

Catalog