Tracker React chart component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Tracker is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import Tracker from @/components/ui/tracker.

import { Tracker, type TrackerDatum } from "@/components/ui/tracker"

const data: TrackerDatum[] = [
  { date: "2026-09-18", status: "ok" },
  { date: "2026-09-19", status: "degraded", description: "Higher response times" },
  { date: "2026-09-20", status: "ok" },
  { date: "2026-09-21", status: "ok" },
  { date: "2026-09-22", status: "ok" },
  { date: "2026-09-23", status: "ok" },
  { date: "2026-09-24", status: "ok" },
]

export function EinvoicingStatus() {
  return (
    <Tracker
      data={data}
      label="Tax e-invoicing sync"
      summary="99.82%"
      locale="en-US"
      statuses={{
        ok: { label: "Operational", tone: "success" },
        degraded: { label: "Degraded", tone: "warning" },
        down: { label: "Down", tone: "danger" },
      }}
      onBlockClick={(datum) => console.log(datum.date)}
    />
  )
}

Props

• data*
  TrackerDatum[] = { id?: string; date?: string; status: string; label?: ReactNode; description?: ReactNode }[]

  One entry per block, oldest first. date is an iso day or date-time (the tooltip title and captions), label replaces the date as the title ("Deploy #482"), description is the note under the status. id (or the date) keys the update animations.

• statuses
  Record<string, { label: string; tone?: Tone; color?: string }>

  Merged over the defaults key by key: ok (success, "Operational"), degraded (warning, "Degraded"), down (danger, "Outage"), maintenance (info, "Maintenance") and none (foreground at 10%, "No data"). Overriding only a label keeps the default tone and color ({ none: { label: "No data" } }). color takes any CSS color, a palette slot ("series-3") or a tone name and wins over tone. Your own keys come first in the legend. Unknown keys draw as none with a dev warning.

• labeldefault ""
  ReactNode

  The title at the start of the header; also names the figure for screen readers.

• summarydefault ""
  ReactNode

  The figure at the end of the header, e.g. the uptime.

• sizedefault "md"
  "sm" | "md" | "lg"

  Block height: 24 / 32 / 40px. On touch screens the tap target grows to at least 44px either way.

• radiusdefault "sm"
  "none" | "sm" | "md" | "full"

  Block corners: 0 / 2 / 3px, or pills.

• gapdefault 2
  number

  Pixels between blocks. With fit="all" it shrinks when the blocks would not fit otherwise.

• fitdefault "latest"
  "latest" | "all"

  latest: blocks keep minBlockWidth and the oldest drop off on narrow screens (the start caption follows). all: every block squeezes, down to 1px.

• minBlockWidthdefault 4
  number

  The narrowest a block gets with fit="latest", in px.

• showCaptionsdefault true
  boolean

  Start and end captions under the bar ("90 days ago", "Today"), from labels.start and labels.end.

• showLegenddefault false
  boolean

  The statuses present in the shown blocks, as keys with labels.

• showTooltipdefault true
  boolean

  The readout on hover, tap and keyboard. The live region and the table still carry every block when off.

• tooltipModedefault "fixed"
  "auto" | "float" | "fixed"

  fixed pins the readout above the bar, centered on the block; float rides beside it; auto floats with a mouse and pins on touch.

• onBlockClick
  (datum: TrackerDatum, index: number) => void

  A click, a second tap on a pinned block, or Enter / Space on the inspected block. index is the position in data.

• localedefault ""
  string

  Locale for the dates. Empty uses the UIProvider / LocaleProvider locale.

• animateddefault true
  boolean

  The sweep on first view and the slide when blocks are appended. Reduced motion always shows the final state.

• loadingdefault false
  boolean

  A pulsing skeleton in the bar's shape, plus the summary and captions.

• emptyState
  ReactNode

  Replaces the bar when data is empty. Default: the kit's empty state with labels.empty.

• descriptiondefault ""
  string

  A one-sentence takeaway for screen readers, read before the counts per status.

• labels
  Partial<TrackerLabels>

  Strings: start(count, first), end (string or (last) => string), block(status, date), summary(counts, total), table, date, status, note, loading, empty, inspectHint. English by default ("90 days ago", "Today", "Degraded on 14 August 2026").

• classNames
  Partial<Record<TrackerSlot, string>>

  Classes for header, label, summary, bar, block, footer, legend, tooltip and table.

Parts

FAQ

Used in

More React chart and stat components