Activity Heatmap
A contribution-style grid from any dated counts, with colour scales, month and weekday labels, a legend and a hover readout.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/activity-heatmapProps
| Prop | Type | Default | Description |
|---|---|---|---|
data* | ActivityDay[] | - | Counts per day: { date: "YYYY-MM-DD", count: number }. Repeated dates are added together; missing dates count as 0. |
endDate | string | - | Last day shown, "YYYY-MM-DD". Defaults to the latest date in data. |
weeks | number | 26 | Number of week columns. |
weekStart | 0 | 1 | 0 | 0 starts weeks on Sunday, 1 on Monday. |
thresholds | [number, number, number, number] | - | Counts at which levels 1–4 begin. Defaults to 1 and quarters of the maximum. |
color | "green" | "violet" | "blue" | "orange" | "green" | Colour scale. |
unit | string | "contribution" | Singular unit for labels, e.g. "commit". |
locale | string | "en-US" | Locale for dates and numbers. |
showLegend | boolean | true | Shows the Less–More legend. |
className | string | - | Extra classes for the root element. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the root element. |