Command Palette

Search for a command to run...

1.7k

Command Palette

Search for a command to run...

Components

GitHub Contributions

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

Loading…
import { Suspense } from "react"
 
import {
  GitHubContributions,
  GitHubContributionsFallback,
} from "@/components/github-contributions"
import { getCachedContributions } from "@/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>
  )
}

Features

  • Built on Kibo UI Contribution Graph for the calendar grid, legend, and yearly total.
  • Loads contribution data from Jonathan Gruber's GitHub Contributions API.
  • Uses Next.js unstable_cache with a one-day revalidation window, then passes a Promise into the client and resolves it with React use()

Installation

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

Usage

import { Suspense } from "react"
 
import {
  GitHubContributions,
  GitHubContributionsFallback,
} from "@/components/github-contributions"
import { getCachedContributions } from "@/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>
  )
}

API Reference

GitHubContributions

Prop

Type

References