# Contribution Graph

> 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.

Category: Charts · MotionKit Plus · Updated 2026-10-23 · Live demo: https://motionkitui.com/components/contribution-graph

## When to use it

Developer profiles and portfolios, team dashboards, habit and streak trackers, and any "activity over a year" view such as commits, sales or workouts.

## How it works

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.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/contribution-graph` after adding their registry token from https://motionkitui.com/account.

## Props

| 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. |

## Accessibility

- **Keyboard: Pass.** The grid is one focusable group: arrows move by day and week, Home and End jump to the first and last day.
- **Screen readers: Pass.** Announced with the year's total; the focused day's count and date are read out as you move.
- **Reduced motion: Pass.** With reduced motion on, every square is there from the start.
- **Colour contrast: Pass.** The total measures 17:1 and labels 7.7:1. Squares are graphics; every value is also available in words.