Tracker

npx shadcn@latest add https://ui.saasflare.io/r/tracker.json

pnpm add @saasflare/ui

"use client"import { Tracker } from "@saasflare/ui"/** A 30-day uptime tracker — one block per day, colored by status. */export function Demo() {    const data = Array.from({ length: 30 }, (_, i) => {        const day = i + 1        if (day === 12) return { color: "red", tooltip: `Day ${day} — Major outage (47m)` }        if (day === 23 || day === 24) return { color: "amber", tooltip: `Day ${day} — Degraded latency` }        return { color: "emerald", tooltip: `Day ${day} — Operational` }    })    return (        <div className="w-full max-w-md">            <Tracker data={data} />        </div>    )}

"use client"import { Tracker } from "@saasflare/ui"/** A healthy service — all blocks operational, with a taller block height. */export function Demo() {    const data = Array.from({ length: 24 }, (_, i) => ({        color: "emerald",        tooltip: `${String(i).padStart(2, "0")}:00 — 100% uptime`,    }))    return (        <div className="w-full max-w-md">            <Tracker data={data} blockHeight={40} gap={3} />        </div>    )}