github-calendar

A fully customizable GitHub-style contributions heatmap for React

@om2309Star on GitHub
npx shadcn@latest add https://github-calendar-kappa.vercel.app/r/github-calendar.json

Preview

@
Mon
Wed
Fri

213 contributions in the last 3 months· @om2309

LessMore

Customize

Color Theme

Cell Shape

Cell Size

16px

Gap Size

4px

Time Range

Week Start

Usage Instructions

// Install via shadcn registry
// npx shadcn@latest add https://github-calendar-kappa.vercel.app/r/github-calendar.json
 
import { GitHubCalendar } from "@/components/ui/github-calendar"
 
export default function App() {
  return (
    <GitHubCalendar
      username="om2309"
      colorScheme="blue"
      cellSize={16}
      cellShape="circle"
      timeRange="3-months"
    />
  )
}

Props API Reference

PropTypeDefaultDescription
usernamestringrequiredGitHub username to fetch and display contributions for — required
colorScheme"green" | "blue" | "purple" | "orange" | "pink" | "dracula" | "halloween""blue"Preset theme palette for the levels
colors[string, string, string, string, string]—Custom 5-stop color array override [empty, level1, level2, level3, level4]
cellSizenumber16Width and height of each grid cell in pixels
cellGapnumber4Spacing between grid cells in pixels
cellShape"square" | "circle" | "rounded""circle"Shape styling for each contribution cell
showTooltipbooleantrueToggle displaying the hover information tooltip
showMonthLabelsbooleantrueToggle showing month names above columns
showDayLabelsbooleantrueToggle showing day of week labels on the left (Mon, Wed, Fri)
weekStart"sun" | "mon""sun"Determines which day of the week to start the columns on
animatebooleanfalseEnable staggered mounting scale animation for cells
timeRange"3-months" | "6-months" | "1-year""3-months"Adjusts the historical date limit shown in the calendar
onCellClick(day: ContributionDay) => void—Callback function fired when a cell is clicked