GitHub Activity
An interactive GitHub ecosystem showcase featuring pure 52-week contribution heatmap matrix content with live fetch for users and repositories.
24.7 KB
•Updated on September 12, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-github-activityAnatomy
Code
import { GitHubActivity } from '@/components/spaceui/github-activity'
export default function Example() {
return <GitHubActivity user="https://github.com/adrielzimbril/spaceui" shape="rounded" />
}Features
Repository Activity with Stats on Top
Layout demonstrating repository commit activity with KPI metric cards positioned above the graph.
User Activity with Stats at Bottom
Layout demonstrating user contribution activity with KPI metric cards positioned below the graph.
Props
GitHubActivity
| Prop | Type | Default | Description |
|---|---|---|---|
user | string | - | Target GitHub identifier: user handle ('shadcn'), profile URL, repository slug ('facebook/react'), or repo URL. Auto-detects user vs repository. |
repo | string | - | Explicit alias for user when targeting a repository ('owner/repo' or GitHub URL) |
target | string | - | Unified alias for user |
username | string | - | Alias for user for backwards compatibility |
shape | square|rounded|circle | rounded | Corner geometry style for inner elements (no squircle) |
contributions | ContributionData | - | 52-week contribution heatmap calendar data (skips live fetch if provided) |
showHeader | boolean | true | Toggles the top summary header |
showLegend | boolean | true | Toggles the bottom color level legend |
title | string | Contributions | Custom header title (displayed if no user/repo is given) |
subtitle | string | Past 52 weeks | Custom header subtitle (defaults to 'Repository commit activity' for repos) |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.