GitHub Contributions

Visualize year-long GitHub contribution activity with daily counts, tooltips, and a profile link.

5,279 contributions in 2025 on GitHub.

LessMore

Features

Shows a full year of daily activity with a color legend and total count.
Caches fetched contributions for a day, so repeat visits do not hit the API.
Streams in behind a Suspense boundary with a spinner fallback while data loads.
Works with any API compatible with the GitHub Contributions API.

Installation

pnpm dlx shadcn@latest add @ncdai/github-contributions

Setup

Set the API base URL. It is required, and the fetcher throws without it:

.env.local

NEXT_PUBLIC_GITHUB_CONTRIBUTIONS_API_URL=https://github-contributions-api.jogruber.de/v4

Data is requested from {base URL}/{username}?y=last

Usage

import { Suspense } from "react"
 
import {
  GitHubContributions,
  GitHubContributionsFallback,
} from "@/components/github-contributions"
import { getCachedContributions } from "@/components/github-contributions/lib/get-cached-contributions"
 
const GITHUB_USERNAME = "ncdai"
const GITHUB_PROFILE_URL = "https://github.com/ncdai"
 
export default function GitHubContributionsDemo() {
  const contributions = getCachedContributions(GITHUB_USERNAME)
 
  return (
    <Suspense fallback={<GitHubContributionsFallback />}>
      <GitHubContributions
        contributions={contributions}
        githubProfileUrl={GITHUB_PROFILE_URL}
      />
    </Suspense>
  )
}