A commit-style heatmap: one square per day, darker when busier, read by pointer or keyboard.
pnpm dlx shadcn@latest add @latheui/contribution-graphPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Contribution Graph is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Also accepts native div attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| data* (required) | { date: string; count: number }[] | — | Days with activity, as ISO dates. Missing days count as zero. |
| label* (required) | string | — | Accessible name, for example “Commits in 2026”. |
| from | string | first date in data | First day shown, as an ISO date. |
| to | string | last date in data | Last day shown. |
| color | string | "var(--chart-4)" | Any CSS color. Busier days use more of it. |
| thresholds | [number, number, number, number] | quarters of the busiest day | Counts at which a day reaches levels 1 to 4. |
| weekStartsOn | 0 | 1 | 0 | 0 for Sunday, 1 for Monday. |
| cellSize | number | 12 | Size of a day in pixels. With fit, the largest a day gets. |
| cellGap | number | 3 | Space between days in pixels. |
| fit | boolean | true | Shrinks the days to fit the width the graph is given, so a whole year fits on a phone. Weekday names hide when rows get too short. |
| minCellSize | number | 4 | The smallest a day gets when fitting, in pixels. |
| formatDay | (count: number, date: Date) => string | — | Wording for a day, used by the readout and screen readers. |
| locale | string | "en-US" | Locale for month and weekday names. |
<ContributionGraph
label="Deploys"
data={deploys}
color="var(--chart-2)"
thresholds={[1, 3, 6, 10]}
formatDay={(count, date) => `${count} deploys on ${date.toDateString()}`}
/><ContributionGraph label="Last 8 weeks" data={recent} cellSize={20} cellGap={4} weekStartsOn={1} />