GitHub Contributions Graph

A customizable contribution heatmap with 22 themes, tooltip support, dark mode, and a live legend. Fetches data from GitHub's public contributions API with 24h caching.

438 contributions, last year on GitHub.

Oct 12, 2025 – Oct 16, 2026

LessMore

import { GitHubContributions } from "@/components/github-contributions";
 
export default function GitHubContributionsDemo() {
  return <GitHubContributions />;
}

Features

Displays the GitHub contributions graph for a user.
Supports different themes.
Supports different block sizes and margins.
Supports showing the count of contributions.
Supports tooltips to show the count of contributions on hover.
Supports fetching data from GitHub API.

Installation

$ npx shadcn@latest add https://akshitr.com/r/github-contributions.json

Usage

import { GitHubContributions } from "@/components/github-contributions";

<GitHubContributions theme="aurora" username="your-username" />

Component API

GitHubContributions

Prop	Type	Default	Description
theme?	`string`	`"github"`	The theme of the graph.
username	`string`	`"akshit3010"`	The username of the user.
showCount?	`boolean`	`false`	Whether to show the count of contributions.
blockMargin?	`number`	`3`	The margin between the blocks.
blockSize?	`number`	`13`	The size of the blocks.
hideMonthLabels?	`boolean`	`false`	Whether to hide the month labels.
hideFooter?	`boolean`	`false`	Whether to hide the footer.

Use Cases

Developer Portfolios & Resumes: Demonstrate ongoing open-source commitment and daily coding cadence with live GitHub metrics.
Engineering Team Dashboards: Monitor team repository contributions and commit frequencies across sprints.
Gamified Habit & Activity Trackers: Adapt the heat map paradigm to visualize daily workouts, study streaks, or writing goals.
Community & Contributor Hubs: Celebrate top open-source contributors on project landing pages or community documentation.

Acknowledgments

Built on top of kibo-ui contribution-graph by @haydenbleasel — the core graph primitives, calendar layout, and legend components.
Contribution data fetched via github-contributions-api by @grubersjoe — a third-party API that scrapes and serves GitHub contribution data.
Date formatting via date-fns.
Icons from lucide-react.
UI primitives (Tooltip) from shadcn/ui by @shadcn.
Inspired by the GitHub contribution graph on github.com.