# Heatmap

A daily activity field with every date and reading available as text.

- Family: Data, imported from `mizu-ui` or `mizu-ui/data`
- Docs: https://mizu.user64bit.world/components/heatmap
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/data/Charts.tsx

## Usage

```tsx
import { Heatmap } from "mizu-ui";

export function Example() {
  const data = Array.from({ length: 70 }, (_, i) => ({
    date: `2026-${String(Math.floor(i / 28) + 7).padStart(2, "0")}-${String((i % 28) + 1).padStart(2, "0")}`,
    value: (i * 7) % 11,
  }));
  return <Heatmap label="Illustrative workshop activity" data={data} />;
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/heatmap
```

## Props

- `data`: `{date: string; value: number}[]`. Days in chronological order; supply missing days as zero.
- `label`: `string`. Figure caption.

## Accessibility

Each square includes its date/value as screen-reader text. The full grid scrolls on narrow screens; color is never the only source of data.

## Motion

Static CSS grid.