Data Display

Heatmap

A calendar-style contribution heatmap that buckets daily activity into levels.

Import

tsx

import { Heatmap } from "@cooud-ui/ui";

bash

npx cooud-ui add heatmap

Examples

Contributions

A calendar-style activity grid: each cell is one day, laid out into week columns of 7. Values bucket into discrete levels against the series max, with the empty level reserved for zero-activity days.

LessMore

tsx

// 17 weeks of daily activity, laid out into week columns of 7.
const data = Array.from({ length: 119 }, (_, i) => {
  const date = new Date(2026, 2, 1 + i);
  return {
    date: date.toISOString().slice(0, 10),
    value: Math.round(Math.random() * 12),
  };
});

return <Heatmap data={data} aria-label="Contributions" />;

API Reference

Generated from the component's exported types.

HeatmapProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`data`*	`HeatmapDay[]`	—	One item per day, laid out into week columns of 7 (top → bottom).
`levels`	`number`	`5`	Number of discrete levels including the empty level 0.
`weekCount`	`number`	—	Hint for the intended number of week columns. Ignored — the data drives the layout — but accepted so callers can document intent.