# C tracker 1

> 90-day uptime — daily status with incidents

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/c-tracker-1).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/c-tracker-1
- Screenshot: https://shadcn.exchange/shot/cnippet/c-tracker-1/light.png
- Registry item: https://ui.cnippet.dev/r/c-tracker-1.json
- Categories: tracker
- Listed: 2026-10-27, source last changed 2026-10-27

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet/c-tracker-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/tracker`, `@cnippet/chart-utils`

## Files

### `registry/default/chart-variants/c-tracker-1.tsx`

```tsx
"use client";

import { Tracker } from "@/registry/default/charts/tracker";
import { formatDate } from "@/registry/default/lib/chart-utils";

// 90 days ending Oct 25 2026, with a few incidents.
const incidents: Record<number, "Degraded" | "Outage"> = {
  17: "Degraded",
  41: "Outage",
  42: "Degraded",
  73: "Degraded",
};

const days = Array.from({ length: 90 }, (_, i) => {
  const date = formatDate(Date.UTC(2026, 6, 28 + i), {
    day: "numeric",
    month: "short",
    timeZone: "UTC",
  });
  const status = incidents[i] ?? "Operational";
  return {
    color:
      status === "Outage"
        ? "var(--destructive)"
        : status === "Degraded"
          ? "var(--warning)"
          : "var(--success)",
    key: date,
    tooltip: `${date} — ${status}`,
  };
});

export default function UptimeTracker() {
  return (
    <div className="w-full max-w-xl rounded-lg border bg-card p-5">
      <div className="flex items-baseline justify-between">
        <span className="font-medium text-sm">api.example.com</span>
        <span className="text-muted-foreground text-sm tabular-nums">
          99.94% uptime
        </span>
      </div>
      <Tracker
        aria-label="API status per day, last 90 days"
        className="mt-3"
        data={days}
      />
      <div className="mt-2 flex justify-between text-muted-foreground text-xs">
        <span>90 days ago</span>
        <span>Today</span>
      </div>
    </div>
  );
}
```