Contribution dots

A GitHub contribution calendar drawn as dots that grow with how busy each day was, with the year's numbers on top. Comes with a helper that fetches anyone's calendar on the server, no token needed.

Contributions: 5,347
Busiest day · Jul 21: 244
Day streak: 27
Active days of 368: 215

Shape

Range

Stats

Color

Install

$ npx shadcn@latest add https://savi.fyi/r/contribution-dots.json

Use it

import { ContributionDots } from "@/components/contribution-dots";
import { getContributions } from "@/lib/get-contributions";
 
export default async function Page() {
  const days = await getContributions("your-username");
  return (
    <ContributionDots
      data={days}
    />
  );
}

Props

data: ContributionDay[] | null; What getContributions() returns, or your own days and counts.
shape: "dot" | "square"; Round dots, or squares like GitHub's.
weeks: number; How far back to draw. Defaults to a year.
stats: boolean; The four numbers on top. On by default.
color: string; Any CSS color. Defaults to the text color.
onDayClick: (day) => void; Makes each day a button.
classNames: { stats, value, label, caption }; Classes for the numbers and labels, to match your type.
getContributions: (user, { token? }); Server helper. Reads the public calendar, or the GitHub API if GITHUB_TOKEN is set.

On this site

Building · GitHub, on the homepage →