---
title: "GitHub Contribution — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Karim Saif · Charts. GitHub Contribution Calendar for Framer A highly customizable, production-ready React component designed specifically for Framer."
canonical: "https://framer.elliotli.dev/component/github-contribution"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/GitHub Contribution

# GitHub Contribution

Display live GitHub activity

[View on Framer](https://framer.com/marketplace/components/github-contribution/?via=elliot-li)

![GitHub Contribution preview image 1](https://framer.elliotli.dev/og/component/github-contribution/7306c6568f304675/1600x1054.jpg)

## Summary

GitHub Contribution Calendar for Framer A highly customizable, production-ready React component designed specifically for Framer.

## Description

GitHub Contribution Calendar for Framer

A highly customizable, production-ready React component designed specifically for Framer. Display live GitHub activity, mock sample data, or custom static datasets with complete visual control directly from the Framer canvas property panel.

## Key Features

### 🔌 Flexible Data Sources

-   **Live GitHub API Integration:** Stream live contribution graphs directly from any public GitHub profile with built-in API debouncing, cancellation, and graceful fallback handling.
    
-   **Sample & Manual Modes:** Test layout designs effortlessly using built-in deterministic sample data or pass structured custom contribution arrays directly.
    

### 🎨 13 Visual Variants & Custom Themes

-   **Pre-built Aesthetic Variants:** Choose from `default`, `minimal`, `city-lights`, `glass`, `neon`, `outline`, `soft`, `dots`, `aurora`, `cyberpunk`, `terminal`, `apple-vision`, and `liquid-glass`.
    
-   **Preset & Custom Color Schemes:** Includes standard GitHub color scales (`green`, `blue`, `purple`, `orange`, `gray`) alongside custom 5-level hex/RGBA color picker overrides.
    
-   **Custom Cell Geometries:** Instantly toggle grid shapes between `rounded`, `square`, `circle`, `squircle`, and `dots`.
    

### ⚙ Deep Visual & Functional Control

-   **Flexible Sizing & Spacing:** Adjust cell dimensions, grid gaps, glow radius intensities, and container width behaviors (`fill` or `hug`).
    
-   **Header & Labels Axis Controls:** Hide or display headers, total contribution counters, user icons, month labels, and weekday markers (`Mon`, `Wed`, `Fri`).
    
-   **Interactive Tooltips & Accessibility:** Native tooltips position dynamically on mouse hover, paired with ARIA grid attributes (`role="grid"`, `aria-label`) and standard keyboard navigation (`Tab`, `Enter`, `Space`).
    

Made with 💛 by [@Karim Saif](/community/creator/@karim-saif/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #4064

## Details

- **Author**: Karim Saif
- **Price**: $7.00
- **Published**: 2026-07-28
- **Updated**: 2026-09-16
- **Added**: 2026-07-28
- **Categories**: Charts

## More like this

-   [Pie Donut Chart](/component/pie-donut-chart) — Rubab Mubashar · Free — All In One Pie /Donut Chart Viusal
-   [29 Radar Chart](/component/29-radar-chart) — BrandingUp · Free — Spider chart with per-axis scales
-   [33 Bubble Chart](/component/33-bubble-chart) — BrandingUp · Free — Bubble chart with 3rd-value sizes
-   [Pricing Matrix](/component/pricing-matrix) — Ainsley Holmes · Free — Currency Payment Comparison Matrix