Display

Heatmap

Server Component

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

Import

tsx

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

bash

npx cronus-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" />;

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component HeatmapDefault layout:inline style:heatmap {
  data:"0,1,4,2,8,3,1,0,2,6,4,1,3,5"
  aria-label:"Activity"
  label "Activity"
}

page "/audit/heatmap/default" type:custom {
  use HeatmapDefault
}

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.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.