🎉 Just launched: v1.1 is here

GitHub contribution graphs for React

Showcase your coding journey with stunning contribution graphs. The way to visualize your GitHub activity and make your portfolio stand out.

npm i @raulcanodev/react-github-dots

Star on GitHub

Live preview of the contribution graph component using real GitHub data.

Quick Start

Installation

npm install @raulcanodev/react-github-dots

Usage

import ContributionGraph from '@raulcanodev/react-github-dots'

export default function Example() {
  return (
    <ContributionGraph 
      username="githubusername"
      token=process.env.NEXT_PUBLIC_GITHUB_PERSONAL_ACCESS_TOKEN
    />
  )
}

Getting a GitHub Personal Access Token

Go to GitHub Settings → Developer Settings → Personal Access Tokens → Fine-grained personal access tokens
Click "Generate new token"
Give your token a name and select the following scopes:
- read:user
- repo
Click "Generate token" and copy your new token
Create a .env.local or .env file in your project root and add:
```
NEXT_PUBLIC_GITHUB_PERSONAL_ACCESS_TOKEN=your_token_here
```

Component Props

Prop	Type	Default	Description
username	string	required	Your GitHub username
token	string	required	GitHub personal access token
theme	'light' \| 'dark'	'dark'	Color theme of the graph
customColorScheme	object	null	Custom colors for contribution levels (0-4)
cacheTime	false \| '2h' \| '8h' \| '1d'	'1d'	Duration to cache the GitHub data
loadingComponent	ReactNode	null	Custom loading state component