# Activity Heatmap

> GitHub-style year heatmap on a volt intensity scale, with month labels, tooltips and arrow-key navigation across days; cells ripple in column by column.

- Collection: Charts
- Tier: pro
- Docs: https://geturui.com/docs/heat-calendar
- Install: `npx shadcn@latest add @geturui-pro/heat-calendar`
- Dependencies: motion

## Usage

```tsx
import { HeatCalendar } from "@/components/charts/heat-calendar";

<HeatCalendar
  year={2026}
  unit="commits"
  data={[{ date: "2026-03-04", value: 7 }, { date: "2026-03-05", value: 2 }]}
  onSelect={(date, value) => console.log(date, value)}
/>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| data | `{ date: string; value: number }[]` | — | ISO dates (YYYY-MM-DD); duplicates are summed. |
| year | `number` | — | Year to draw; defaults to the latest year in data. |
| weekStart | `0 | 1` | 0 | Sunday or Monday rows first. |
| thresholds | `[number, number, number]` | — | Cut-offs for the four intensity levels; defaults to quarters of the max. |
| unit | `string` | "contributions" | Noun used in labels and the tooltip. |
| onSelect | `(date: string, value: number) => void` | — | Click or Enter on a day. |

## Accessibility

- One day is in the tab order; arrows move by day and week, Page Up/Down by month, Home/End to the ends of the year.
- Each day has a label like “7 commits on Wed, Mar 4”.
- Intensity uses a single-hue ramp and every value is available in text.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.