Overview
The iconic GitHub contribution calendar showing activity levels throughout the year. Displays a grid of colored squares representing contribution intensity, with customizable color schemes.
Installation
bunx shadcn@latest add @elements/github-activity-calendarUsage
import { GitHubActivityCalendar } from "@/components/elements/github/github-activity-calendar";
export function ProfileActivity() {
return <GitHubActivityCalendar username="shadcn" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
username | string | - | GitHub username |
year | number | Current year | Year to display |
colorScheme | "green" | "blue" | "purple" | "orange" | "green" | Color scheme for the calendar |
staticData | ContributionDay[] | - | Static data array (bypasses API) |
className | string | - | Additional CSS classes |
Static Data Shape
{
date: string; // ISO date string (YYYY-MM-DD)
count: number; // Number of contributions
level: 0 | 1 | 2 | 3 | 4; // Intensity level
}[]Color Schemes
Green (Default)
<GitHubActivityCalendar username="shadcn" colorScheme="green" />Blue
<GitHubActivityCalendar username="shadcn" colorScheme="blue" />Purple
<GitHubActivityCalendar username="shadcn" colorScheme="purple" />Orange
<GitHubActivityCalendar username="shadcn" colorScheme="orange" />Specific Year
<GitHubActivityCalendar username="shadcn" year={2024} />Features
- Full year contribution calendar visualization
- Four color scheme options
- Shows total contribution count
- Day and month labels
- Intensity legend (Less to More)
- Built-in loading state
- Hover tooltips with contribution details