Contribution Heatmap is a GitHub style activity grid with staggered cell reveal on scroll, a count up total, hover tooltips per cell, and four color themes. Feed it your own data or let it generate plausible demo data, and the usage section shows how to map the GitHub API response directly into the expected shape. Built with React and Tailwind CSS. Works on developer portfolios, profile cards, and open source project pages.
Installation
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Update the import paths to match your project setup.
Usage
import ContributionHeatmap from "@/components/pro/blocks/contribution-heatmap";
// Default (auto-generated demo data, green theme)
<ContributionHeatmap />
// With real data and a theme
<ContributionHeatmap
data={contributions} // { date: Date; count: number }[]
title="Code activity"
theme="cyan" // "green" | "cyan" | "purple" | "orange"
/>To feed it from the GitHub API, map the response like:
const data =
response.data.user.contributionsCollection.contributionCalendar.weeks
.flatMap((w) => w.contributionDays)
.map((d) => ({ date: new Date(d.date), count: d.contributionCount }));Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | { date: Date; count: number }[] | generated demo data | ~182 days (6 months) of contribution counts. Falls back to random demo data when omitted. |
title | string | "Contributions" | Label shown in the card header. |
theme | "green" | "cyan" | "purple" | "orange" | "green" | Color palette for the heatmap levels. |
className | string | — | Additional classes on the card container. |