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.
chartheatmapcalendarcontributionsactivitysvg
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/heat-calendar
Usage
usage.tsx
1import { HeatCalendar } from "@/components/charts/heat-calendar";
2
3<HeatCalendar
4 year={2026}
5 unit="commits"
6 data={[{ date: "2026-03-04", value: 7 }, { date: "2026-03-05", value: 2 }]}
7 onSelect={(date, value) => console.log(date, value)}
8/>
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.