Components/Components
GitHub Calendar
Fully interactive GitHub contribution calendar with year-switching and tooltips.
githubcalendarcontributions
Preview
Installation
npx shadcn@latest add https://grootstudio.vercel.app/r/github-calendar.jsonExamples
Blue Theme
Circular Cells
Minimal Layout
Custom Range (Sunday Start)
Usage
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| 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