A year, cell by cell.

GitHub-style activity heatmaps for React. Headless, Radix-style, and composable. The layout, date math, and tooltip wiring; your colors and labels.

Read the docs

SepOctNovDecJanFebMarAprMayJunJulAugSep

MonWedFri

Less

fig. 01 · contributionshover a cell

usage · synced with the theme

const COLORS = ["#161b22", "#0e4429", "#006d32", "#26a641", "#39d353"];

<HeatGraph.Root data={data} weekStart="sunday" colorScale={COLORS}>
  <HeatGraph.Grid className="gap-[3px]">
    {() => (
      <HeatGraph.Cell className="aspect-square rounded-[2px]" />
    )}
  </HeatGraph.Grid>
</HeatGraph.Root>

The parts

RootGridCellMonthLabelsDayLabelsLegendLegendLevelTooltipautoLevelsMONTH_SHORTDAY_SHORT

Eight components plus the level math and label helpers, every element a plain div you can style.

Why headless

Radix-style composable

Compound components you fully control. Root, Grid, Cell, Legend, Tooltip. Compose only the pieces you need.

Fully headless

Zero styling opinions. Bring your own CSS, Tailwind, or any styling solution. Every element is a plain div you can style.

Tooltip built in

Hover tooltips powered by Radix Popper for pixel-perfect positioning. No extra dependencies needed.

Custom bucketing

Plug in your own classification function to control how counts map to levels. Defaults to evenly-distributed auto-levels.

Localizable

Month and day labels expose raw numeric values. Format with the included English helpers or use Intl.DateTimeFormat for any locale.