A GitHub-style activity grid with month and weekday labels, an intensity legend and a hover tooltip with date and count. Ships a deterministic sampleActivity helper.
npx shadcn@latest add https://hyperblur.dev/r/heatmap-calendar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/heatmap-calendar.tsx.
import { HeatmapCalendar } from "@/components/hyperblur/heatmap-calendar"
<HeatmapCalendar values={sampleActivity("2026-10-31", 26)} weeks={26} unit="commit" />| Prop | Type | Default | Description |
|---|---|---|---|
| values | Record<string, number> | number[] | Counts by ISO date (2026-10-31), or an array whose last item is endDate and runs back one day per entry. Uses sampleActivity() when omitted. | |
| endDate | string | "2026-10-31" | Last day shown, as YYYY-MM-DD. Pass today's date from the server or an effect to keep rendering deterministic. |
| weeks | number | 52 | Number of week columns. |
| colors | string[] | ["#171717", "#112a52", "#1a4a94", "#2f7bff", "#8dbcff"] | Intensity scale from empty to busiest. Any length of two or more. |
| unit | string | "contribution" | Singular noun used in the tooltip and summary. |
| showTotal | boolean | true | Show the total count under the grid. |
| showLegend | boolean | true | Show the Less to More legend. |
| animate | boolean | true | Fade the columns in from left to right on mount. |