KQ-198 · HEAT/CALENDAR

Heat Calendar

A contribution heatmap. Cells wash in on a short diagonal cascade, and moving across the grid — by pointer or the arrow keys — floats a readout of that day's tally. Roving focus keeps the whole grid to a single tab stop.

KQ-198 · HEAT/CALENDAR
LessMore

Total 623

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/heat-calendar

Props

PropTypeDefaultDescription
daysHeatDay[]Chronological days — date and count — laid out in columns of seven.
maxnumberScale ceiling for the four levels; defaults to the busiest day.
unitstringUnit shown in the hover readout.