Skip to main content
Back to Components

GitHub Calendar

A customizable SVG-based GitHub contribution calendar with high-performance responsive scaling, legend keys, and premium floating tooltips.

Preview

Installation

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/github-calendar.json

Usage

Import the component:

import GithubCalendar from "@/components/ui/github-calendar"

Use it in your code:

import GithubCalendar from "@/components/ui/github-calendar";

export default function Dashboard() {
  return (
    <div className="w-full max-w-4xl">
      <GithubCalendar username="ankurrera" theme="dark" />
    </div>
  );
}

Props

PropertyTypeDefaultDescription
username*string-The GitHub username to fetch contribution days for (e.g. 'ankurrera').
theme'light' | 'dark'-Force the light or dark styling theme mode. If not provided, it dynamically hooks into the document's classList for dark mode classes.