Contribution graph
A year of daily counts as squares, a column per week, busier days in stronger accent. Drawn on the server; a tip reads out each day.
Contributions
A made-up year, so every level shows.
Features
- A column per week and a row per weekday, Sunday on top, months along the top and Mon, Wed, Fri down the side.
- Five levels: none, then the quartile of the active days, as GitHub shades its graph, so one huge day does not dim the rest. Set --k-cg-0 to --k-cg-4 for your own colours.
- The grid is an SVG with no hooks, drawn on the server; the only client code is the tip that reads out a day.
- On a narrow screen the grid scrolls sideways and opens on the latest weeks, without script.
- Bring the days from anywhere. This site reads GitHub’s public calendar at build time, so visitors never call GitHub.
Use it for
- GitHub or GitLab activity on a profile page.
- Any daily count: commits, runs, workouts, pages read.
On this site
- Home: under Projects and ToolingA year of public work on GitHub, a square a day.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { ContributionGraph } from 'runets'
<ContributionGraph
title="Contributions"
href="https://github.com/you"
days={[{ date: '2026-11-08', count: 0 }, { date: '2026-11-09', count: 3 }]}
/>API
| Prop | Type | What it does |
|---|---|---|
days | { date, count }[] | One entry per day, oldest first; dates as YYYY-MM-DD. |
title / note | string / ReactNode | An optional heading and the line beside it. |
href | string | Links the total to the profile the counts come from. |
label | string | What a count counts, made plural on its own; contribution by default. |
period | string | Ends the total line; in the last year by default. |
level | 2 | 3 | 4 | Heading level of the title. |
id | string | The heading id the section is labelled by. |
Accessibility
- The grid is one focus stop: up and down move a day, left and right a week, Home and End go to either end.
- The tip is a polite live region, so each day is read out as the keys move.
- The SVG is aria-hidden; the grid is a group labelled with the total.
- The legend is aria-hidden: colour only repeats the number the tip says.
Source
The code is in src/kit/contribution-graph.tsx in runets, MIT licensed.