GitHub calendar

Component 535

About

GitHub-style calendar component for Next.js that displays a contribution-like heatmap.

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

Code

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

Usage.tsx

import { GitHubCalendar } from "@/components/ui/git-hub-calendar";

export default function DemoOne() {
  const contributionData = [
  { date: "2025-10-13", count: 3 },
  { date: "2025-05-12", count: 1 },
  { date: "2025-09-11", count: 2 },
  { date: "2025-09-10", count: 5 },
  { date: "2024-09-13", count: 2 },
  { date: "2024-09-15", count: 0 },
  { date: "2024-09-20", count: 4 },
  { date: "2024-10-01", count: 1 },
  { date: "2024-10-05", count: 3 },
  { date: "2024-10-10", count: 0 },
  { date: "2024-10-15", count: 2 },
  { date: "2024-10-20", count: 5 },
  { date: "2024-11-02", count: 1 },
  { date: "2024-11-07", count: 3 },
  { date: "2024-11-12", count: 4 },
  { date: "2024-11-18", count: 0 },
  { date: "2024-11-25", count: 2 },
  { date: "2024-12-01", count: 3 },
  { date: "2024-12-05", count: 1 },
  { date: "2024-12-10", count: 0 },
  { date: "2024-12-15", count: 4 },
  { date: "2024-12-20", count: 2 },
  { date: "2024-12-25", count: 0 },
  { date: "2025-01-03", count: 3 },
  { date: "2025-01-08", count: 1 },
  { date: "2025-01-15", count: 5 },
  { date: "2025-01-20", count: 2 },
  { date: "2025-01-25", count: 0 },
  { date: "2025-02-01", count: 4 },
  { date: "2025-02-07", count: 3 },
  { date: "2025-02-12", count: 1 },
  { date: "2025-02-18", count: 0 },
  { date: "2025-02-25", count: 2 },
  { date: "2025-03-02", count: 5 },
  { date: "2025-03-08", count: 3 },
  { date: "2025-03-15", count: 1 },
  { date: "2025-03-20", count: 0 },
  { date: "2025-03-25", count: 4 },
  { date: "2025-04-01", count: 2 },
  { date: "2025-04-07", count: 0 },
  { date: "2025-04-12", count: 3 },
  { date: "2025-04-18", count: 1 },
  { date: "2025-04-25", count: 5 },
  { date: "2025-05-01", count: 2 },
  { date: "2025-05-07", count: 0 },
  { date: "2025-06-01", count: 4 },
  { date: "2025-06-10", count: 3 },
  { date: "2025-06-15", count: 1 },
  { date: "2025-07-01", count: 0 },
  { date: "2025-07-10", count: 2 },
  { date: "2025-08-01", count: 5 },
  { date: "2025-08-15", count: 3 },
  { date: "2025-09-01", count: 1 },
];

  return (
    <div> 
      <GitHubCalendar 
      data={contributionData}  
      />
    </div>
  );
}