A year of activity as a grid of days, like a GitHub profile, that fills in week by week on view and reads any day in a tooltip.
Customize
Usage
import { ContributionGraph } from "@/components/motionkit/contribution-graph";
// one entry per day, oldest first, e.g. from the GitHub GraphQL API
<ContributionGraph days={days} />Motion
The exact curves this component runs, plotted with Motion's own maths.
Square fill
Scrolls into view
Developer profiles and portfolios, team dashboards, habit and streak trackers, and any "activity over a year" view such as commits, sales or workouts.
Days are placed in columns of weeks running Monday to Sunday, so the first column starts partway down when the data doesn't begin on a Monday. Dates are parsed as UTC so nothing shifts with the visitor's time zone. Each count maps to one of five shades by its share of the busiest day, mixed from your colour into the card colour with color-mix. When the graph scrolls into view, every square fades and grows in with a delay set by its week and weekday, so the year fills from left to right. The arrow keys and pointer read any day in a tooltip and a live region.
| Prop | Type | Default | Description |
|---|---|---|---|
| days | { date: string; count: number }[] | — | One entry per day, oldest first, as ISO dates. |
| unit | [string, string] | ["contribution", "contributions"] | What is counted, singular and plural. |
| color | string | "#5FAEB4" | Colour of the busiest days. |
| cellSize | number | 11 | Size of each square in pixels. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/contribution-graph. It saves the file to components/motionkit and installs its dependencies.
Contribution Graph is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, every square is there from the start.
KPI Card
A headline number that counts up beside a sparkline that draws itself, with a change badge and hover readout.
Odometer
Every digit rolls on its own wheel to the new value, like a mileage counter, rather than counting up.
Donut Chart
Segments draw themselves in on scroll; hover, tap or tab to one to lift it and read its value and share in the middle.
Customize
Usage
import { ContributionGraph } from "@/components/motionkit/contribution-graph";
// one entry per day, oldest first, e.g. from the GitHub GraphQL API
<ContributionGraph days={days} />Motion
The exact curves this component runs, plotted with Motion's own maths.
Square fill
Scrolls into view
The live preview is free to explore. Plus unlocks the source for Contribution Graph and every other premium component.