GitHub Calendar

A fully customizable GitHub-style contributions heatmap for React.

Hovering a cell shows a tooltip with the contribution count and date when showTooltip is enabled. Clicking a cell fires onCellClick with the underlying day data.

Options you can pass to customize this component.

Prop
Type
Description
username*
string

GitHub username to fetch and display contributions for.

colorScheme
"green""blue""purple""orange""pink""dracula""halloween"

Preset theme palette for the contribution levels.

colors
[string, string, string, string, string]

Custom 5-stop color array override, ordered [empty, level1, level2, level3, level4].

cellSize
number

Width and height of each grid cell in pixels.

cellGap
number

Spacing between grid cells in pixels.

cellShape
"square""circle""rounded"

Shape styling for each contribution cell.

showTooltip
boolean

Toggle displaying the hover information tooltip.

showMonthLabels
boolean

Toggle showing month names above columns.

showDayLabels
boolean

Toggle showing day of week labels on the left (Mon, Wed, Fri).

weekStart
"sun""mon"

Determines which day of the week to start the columns on.

animate
boolean

Enable staggered mounting scale animation for cells.

timeRange
"3-months""6-months""1-year"

Adjusts the historical date limit shown in the calendar.

onCellClick
(day: ContributionDay) => void

Callback fired when a contribution cell is clicked.

className
string

Additional classes merged onto the outer container.

npx shadcn add amitgajare2/ariseui/github-calendar
GitHub Calendar

Loading activity…

@amitgajare2

LessMore