GitHub-style activity heatmaps for React
Headless, Radix-style primitives for building activity heatmap graphs. Composable, unstyled, and fully customizable.
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>Why Heat Graph?
Everything you need to build activity heatmaps — without fighting your styling framework or losing control.
Compound components you fully control. Root, Grid, Cell, Legend, Tooltip — compose only the pieces you need.
Zero styling opinions. Bring your own CSS, Tailwind, or any styling solution. Every element is a plain div you can style.
Hover tooltips powered by Radix Popper for pixel-perfect positioning. No extra dependencies needed.
Plug in your own classification function to control how counts map to levels. Defaults to evenly-distributed auto-levels.
Month and day labels expose raw numeric values. Format with the included English helpers or use Intl.DateTimeFormat for any locale.
Start building today