Heatmap Calendar
GitHub-style contribution calendar with five intensity levels, tooltips and roving-tabindex keyboard navigation.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
HeatmapCalendarProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| data* required | HeatmapDatum[] | — | — |
| endDate | string | HEATMAP_END_DATE | Last day shown (YYYY-MM-DD). Fixed by default so output is deterministic. |
| weeks | number | 53 | — |
| tone | HeatmapTone | "emerald" | — |
| unit | string | "contribution" | Singular unit name used in labels, e.g. "contribution" |
| title | string | "Activity calendar" | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/heatmap-calendar.json