---
title: "GitHub Contributions — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Soyeb · Text. If you're building a developer portfolio, this GitHub Contributions component is ready to drop into any project."
canonical: "https://framer.elliotli.dev/component/github-contributions"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/GitHub Contributions

# GitHub Contributions

Live GitHub Activity Graph

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

![GitHub Contributions preview image 1](https://framer.elliotli.dev/og/component/github-contributions/13a67cb2c53d1ad1/1600x1200.jpg)

## Summary

If you're building a developer portfolio, this GitHub Contributions component is ready to drop into any project.

## Description

Show your **GitHub Live** activity directly inside your Framer website with a beautiful, fully customizable github calendar.

Simply enter any GitHub username and the component automatically fetches live contribution data and displays it as an interactive GitHub heatmap. Perfect for developer portfolios, personal websites, SaaS landing pages, resumes, open-source showcases, and startup teams.

This component requires no code, no API keys, and no external embeds. Customize colors, labels, activity levels, tooltips, fonts, date ranges, light & dark themes, and much more from the right-hand property panel.

If you're building a developer portfolio, this GitHub Contributions component is ready to drop into any project.

## Instructions

Getting started only takes a minute.

-   Copy the component URL provided after purchase.
    
-   Paste it into your Framer project.
    
-   Resize the component to fit your layout.
    
-   Enter any GitHub username.
    
-   Choose whether to display the Current Year, Last Year, or a Custom Date Range.
    
-   Customize colors, labels, typography, tooltips, and layout using the property controls.
    
-   Publish your website, that's it..
    

No coding required.

## Features

1.  Live GitHub Contributions
    
2.  Automatic GitHub Data Fetching
    
3.  No API Key Required
    
4.  Current Year, Last Year & Custom Date Range
    
5.  GitHub Heatmap Calendar
    
6.  Zero-Code Setup
    
7.  Responsive by Default
    
8.  Canvas Preview Support
    
9.  Independent Light & Dark Themes
    
10.  Fully Customizable Color Palette
     
11.  Custom Month & Weekday Labels
     
12.  Flexible Week Start Day
     
13.  Fully Customizable Tooltip Design
     
14.  Adjustable Block Size, Gap & Radius
     
15.  Typography Controls
     
16.  Smooth Performance
     

**Made with** ❤ **by** [**Soyeb**](https://framer.link/market)

**Refund Policy:** Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned, exchanged or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

Have questions or need a custom Framer component? Reach out at [heysoyebali@gmail.com](mailto:heysoyebali@gmail.com)

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

-   All · #2596

## Details

- **Author**: Soyeb
- **Price**: $14.00
- **Published**: 2026-07-17
- **Updated**: 2026-08-03
- **Added**: 2026-07-17
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos