sigilUI

Commit Grid

A GitHub-style contribution heatmap showing activity intensity over time.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { CommitGrid } from "@sigil-ui/components";

Usage

<CommitGrid
  weeks={52}
  data={contributions}
  color="var(--s-success)"
  cellSize={12}
  gap={2}
/>

Props

PropTypeDefaultDescription
dataCommitDay[]—Array of date/count entry objects
weeksnumber52Number of weeks to display
cellSizenumber12Cell size in px
responsivebooleanfalseFill the available width with equal square cells. Overrides cellSize.
gapnumber2Gap between cells in px
colorstringvar(--s-success)Cell fill color
showDayLabelsbooleantrueShow Mon/Wed/Fri labels
showMonthLabelsbooleantrueShow month abbreviations

Token integration

CSS VariablePurpose
--s-successDefault cell color
--s-text-mutedDay and month labels
--s-font-monoLabel font family