Calendar Heatmap

A GitHub-style contributions grid that visualizes a year of daily values as week columns with quantized color intensity, streak stats, and month labels.

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

import CalendarHeatmap from "@/components/ui/calendar-heatmap";

export default function CalendarHeatmapDemo() {
  return (
    <div className="flex w-full max-w-xl items-center justify-center p-8">
      <CalendarHeatmap />
    </div>
  );
}