Commit Grid
A GitHub-style contribution heatmap showing activity intensity over time.
Preview
Import
import { CommitGrid } from "@sigil-ui/components";Usage
<CommitGrid
weeks={52}
data={contributions}
color="var(--s-success)"
cellSize={12}
gap={2}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | CommitDay[] | — | Array of date/count entry objects |
weeks | number | 52 | Number of weeks to display |
cellSize | number | 12 | Cell size in px |
responsive | boolean | false | Fill the available width with equal square cells. Overrides cellSize. |
gap | number | 2 | Gap between cells in px |
color | string | var(--s-success) | Cell fill color |
showDayLabels | boolean | true | Show Mon/Wed/Fri labels |
showMonthLabels | boolean | true | Show month abbreviations |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-success | Default cell color |
--s-text-muted | Day and month labels |
--s-font-mono | Label font family |