Contribution graph

Storybook

A year of activity, one cell per day

The contribution graph renders a GitHub-style heatmap: weeks as columns, weekdays as rows, and a five-step green ramp (--color-chart-contribution-0 through -4) mapping each day's activity level to colour. It takes a plain array of days, so the data can come from anywhere: the GitHub API, an internal tool, or generated demo data.

Live GitHub data

This instance pulls real contribution data for the account that builds Rift DS, cached server-side and refreshed every six hours.

Default

The graph wears the same card, header, and padding as every other chart; bare strips them when a surrounding panel supplies the surface, as the live instance above does.

Contribution activity

One cell per day, coloured by volume

1189 contributions in the last year

Grid only

Month labels, caption, and legend are all optional: the bare grid works as a compact activity strip.

tsx
// From the npm package
import { ContributionGraph } from 'rift-ds/components/ContributionGraph/ContributionGraph';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/contribution-graph.json