github-contributions-ui

Display a GitHub-style contributions graph anywhere in your React or Next.js application.

A lightweight, plug-and-play component designed for developer portfolios, dashboards, and personal websites.

✨ Features

• GitHub-style contribution heatmap
• Plug-and-play setup
• Works with React and Next.js
• No API keys required
• Lightweight and fast
• Theme support
• Fully client-side

📦 Installation

npm install github-contributions-ui

🚀 Quick Start

Next.js (App Router)

"use client";

import { GithubActivity } from "github-contributions-ui";

export default function Page() {
  return <GithubActivity username="octocat" theme="blue" />;
}

React (Vite / CRA)

import { GithubActivity } from "github-contributions-ui";

function App() {
  return <GithubActivity username="octocat" theme="blue" />;
}

export default App;

⚙️ Props

| Prop | Type | Required | Description | | ---------- | ----------------------------------------- | -------- | --------------------------- | | username | string | ✅ | GitHub username | | theme | "light" \| "dark" \| "blue" \| "purple" | ❌ | UI theme (default: light) |

Example

<GithubActivity
  username="octocat"
  theme="dark"
/>

🎨 Available Themes

• light
• dark
• blue
• purple

🌐 Live Demo

Try it instantly:

👉 https://github-contributions-ui.vercel.app/

💡 Use Cases

• Developer portfolios
• Personal websites
• SaaS dashboards
• Resume websites
• Developer profiles

🧱 Built With

• React
• TypeScript
• Next.js
• Tailwind CSS

☕ Support