# C tracker 3

> Habit tracker — four weeks per habit

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-3).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/c-tracker-3
- Screenshot: https://shadcn.exchange/shot/cnippet/c-tracker-3/light.png
- Registry item: https://ui.cnippet.dev/r/c-tracker-3.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-3.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`

## Files

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

```tsx
"use client";

import { Tracker } from "@/registry/default/charts/tracker";

// Four weeks of habits, Monday first. 1 = done, 0 = missed.
const habits = [
  { done: "1101110111011111011101111111", name: "Run 5K" },
  { done: "1111111111111011111111111111", name: "Read 20 min" },
  { done: "0100100010010001001000100100", name: "Meditate" },
];

export default function HabitTracker() {
  return (
    <div className="grid w-full max-w-md gap-4 rounded-lg border bg-card p-5">
      {habits.map((h) => {
        const count = h.done.split("").filter((d) => d === "1").length;
        return (
          <div key={h.name}>
            <div className="mb-1.5 flex justify-between text-sm">
              <span>{h.name}</span>
              <span className="text-muted-foreground tabular-nums">
                {count}/28 days
              </span>
            </div>
            <Tracker
              aria-label={`${h.name}, last 28 days`}
              className="h-5"
              data={h.done.split("").map((d, i) => ({
                color: d === "1" ? "var(--chart-2)" : undefined,
                key: String(i),
                tooltip: `Day ${i + 1} — ${d === "1" ? "Done" : "Missed"}`,
              }))}
            />
          </div>
        );
      })}
    </div>
  );
}
```