Back to Components
PreviousNext

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.

Contribution GraphMayJunJulAugSepOctNovDecJanFebMarApr1114221261111213321111634363433518122125132211311141111112122410421111241142122522132232112111452237433432222112121141742122
286 contributions in 2025 on GitHub.
Less0 contributions1 contributions2 contributions3 contributions4 contributionsMore
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

PropTypeDefaultDescription
theme?string"github"The theme of the graph.
usernamestring"akshit3010"The username of the user.
showCount?booleanfalseWhether to show the count of contributions.
blockMargin?number3The margin between the blocks.
blockSize?number13The size of the blocks.
hideMonthLabels?booleanfalseWhether to hide the month labels.
hideFooter?booleanfalseWhether to hide the footer.

Acknowledgments

References