Contribution Heatmap

Dashboards 11

About

A polished GitHub-style contribution heatmap component for React and TypeScript. Includes dark/light theme support, multiple color palettes, interactive tooltips, replay animation, and export-to-image functionality. Designed for dashboards, developer portfolios, analytics platforms, and activity tracking interfaces with a clean, modern UI and customizable layout

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Contribution Heatmap to your project and fits it to your theme.

Code

How Contribution Heatmap is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import ContributionHeatmap from "@/components/ui/contribution-heatmap"

function generateData() {

  const today = new Date()
  const data = []

  for (let i = 365; i >= 0; i--) {

    const d = new Date(today)
    d.setDate(today.getDate() - i)

    data.push({
      date: d.toISOString().split("T")[0],
      count: Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 6)
    })

  }

  return data
}

export default function Demo() {

  const data = generateData()

  return (
    <div className="w-full flex flex-col items-center gap-6 p-10">

      <div className="text-center max-w-md">

        <h2 className="text-lg font-semibold">
          Contribution Heatmap
        </h2>

        <p className="text-sm text-muted-foreground mt-1">
          A GitHub-style activity heatmap with theme support,
          export functionality, and animated replay.
        </p>

      </div>

      <ContributionHeatmap data={data} />

    </div>
  )
}