GitHub Contributions
Visualize year-long GitHub contribution activity with daily counts, tooltips, and a profile link.
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:
NEXT_PUBLIC_GITHUB_CONTRIBUTIONS_API_URL=https://github-contributions-api.jogruber.de/v4Data is requested from {base URL}/{username}?y=last
Usage
import { Suspense } from "react"
import type { Activity } from "@/components/contribution-graph"
import {
GitHubContributions,
GitHubContributionsFallback,
} from "@/components/github-contributions"
const GITHUB_PROFILE_URL = "https://github.com/tamirazrab"
/**
* Showcase/demo must not call the live contributions API during prerender —
* a network timeout fails the entire `/components/showcase` static export.
*/
export default function GitHubContributionsDemo() {
const contributions = Promise.resolve([] as Activity[])
return (
<Suspense fallback={<GitHubContributionsFallback />}>
<GitHubContributions
contributions={contributions}
githubProfileUrl={GITHUB_PROFILE_URL}
/>
</Suspense>
)
}API reference
GitHubContributions
Prop
Type