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

days
HeatDay[]
default
Chronological days — date and count — laid out in columns of seven.
max
number
default
Scale ceiling for the four levels; defaults to the busiest day.
unit
string
default
Unit shown in the hover readout.