Tracker

Installation

npx shadcn@latest add @blank/tracker

Usage

import { Tracker } from "@/components/ui/tracker"

<Tracker
  aria-label="Uptime, last 30 days"
  data={[
    { status: "success", tooltip: "Operational" },
    { status: "warning", tooltip: "Degraded performance" },
  ]}
/>

Each block takes a status instead of a color class, so the strip follows the theme. The strip is a list with one tab stop: arrow keys move between blocks, Home and End jump to the ends, and the focused block shows its tooltip. A tap opens it on touch screens. Give the strip an aria-label; each block is named by its tooltip, or by label when the tooltip is not plain text.

Examples

Statuses

API Reference

Tracker

TrackerBlock