ContributionGraph

GitHub-style activity heatmap — a year of days as a 7×N grid of intensity cells.

import { ContributionGraph } from "@ps1ui/core";

Basic

const data = [
  { date: "2025-01-01", count: 0 },
  { date: "2025-01-02", count: 3 },
  { date: "2025-01-03", count: 7 },
  // ...one entry per day, sorted ascending, contiguous...
  { date: "2025-12-30", count: 5 },
  { date: "2025-12-31", count: 12 },
];

<ContributionGraph data={data} />

Monday start

<ContributionGraph data={data} weekStartsOn="monday" />

Larger cells

<ContributionGraph
  data={data}
  cellSize={16}
  cellGap={4}
  cellRadius={3}
/>

Without labels or legend

<ContributionGraph
  data={data}
  showMonthLabels={false}
  showWeekdayLabels={false}
  showLegend={false}
/>

Custom day label

<ContributionGraph
  data={data}
  labelForDay={(day) =>
    day.count > 0
      ? `${day.date} → ${day.count} commit${day.count === 1 ? "" : "s"}`
      : `${day.date} → no activity`
  }
/>

Props

Prop	Type	Default	Description
`data`*	`ContributionDay[]`	—	Sorted days to render (ascending by date). Gaps are allowed — each day lands at its actual weekday and columns spanning purely-missing days simply render empty.
`weekStartsOn`	`"sunday" \| "monday"`	`"sunday"`	First day of each week column.
`cellSize`	`number`	`11`	Cell side length in pixels.
`cellGap`	`number`	`3`	Gap between cells in pixels.
`cellRadius`	`number`	`2`	Cell corner radius in pixels.
`showMonthLabels`	`boolean`	`true`	Render month labels above the grid.
`showWeekdayLabels`	`boolean`	`true`	Render weekday labels beside the grid.
`showLegend`	`boolean`	`true`	Render a Less/More legend under the grid.
`labelForDay`	`(day: ContributionDay) => string`	`defaultLabelForDay`	Text for a cell — used both as the cell's accessible name and as its hover/focus tooltip. Defaults to "N contributions on Month Nth." — "No contributions" when count is zero, singular when count is one.

All native <div> attributes are also accepted.