Components/Components

GitHub Calendar

Fully interactive GitHub contribution calendar with year-switching and tooltips.

githubcalendarcontributions

Preview

Installation

npx shadcn@latest add @grootstudio/github-calendar

Usage

1

Import the component

2

Use like this

Blue Theme

Circular Cells

Minimal Layout

Custom Range (Sunday Start)

Props

PropTypeDefaultRequiredDescription
username
string
-GitHub username to fetch data for
data
ContributionData
-Optional manual contribution data object
startDate
string
-Start date in YYYY-MM-DD format
endDate
string
-End date in YYYY-MM-DD format
startsOnSunday
boolean
true
Whether to start weeks on Sunday or Monday
cellSize
number
12
Size of each contribution cell in pixels
cellGap
number
3
Gap between cells in pixels
cellShape
rounded|circle
rounded
Visual shape of the contribution cells
theme
string|ThemeColors{{}}
github
Color theme (github, blue, sunset, purple, gray) or custom object
showMonthLabels
boolean
true
Display month names at the top
showStats
boolean
true
Show contribution count and username stats
showLegend
boolean
true
Display the Less/More color legend

Dependencies

lucide-react