DocsGithub Calendar

Github Calendar

A premium, customizable visualization of GitHub contribution graphs with multiple color schemes and display variants.

Installation

pnpm dlx shadcn@latest add @componentry/github-calendar

Dependencies: framer-motion clsx tailwind-merge

Usage

API Reference

PropTypeDefault
usernamestring

The GitHub username to fetch contributions for. (Required)

—
variant"default" | "city-lights" | "minimal"

The visual style variant of the calendar.

"default"
colorSchema"green" | "blue" | "purple" | "orange" | "gray"

The color scheme for the contribution cells.

"green"
showTotalboolean

Whether to show the total contributions count header.

true

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousFlight Status CardNextHover Transition
import { GithubCalendar } from "@/components/ui/github-calendar"
 
<GithubCalendar username="harshjdhv" />