4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T1b10,"use client"; import { useEffect, useMemo, useState } from "react"; import { cn } from "@/lib/utils"; interface GitHubContributionsProps extends React.HTMLAttributes { owner: string; repo: string; staticContributions?: number; staticData?: number[][]; } function generateRandomGrid(rows: number, cols: number): number[][] { return Array.from({ length: rows }, () => Array.from({ length: cols }, () => Math.random()), ); } interface HeatmapGridProps { data: number[][]; className?: string; } const HEATMAP_ROWS = 7; const HEATMAP_COLS = 12; const HEATMAP_CELL_SIZE = 14; const HEATMAP_GAP = 4; const HEATMAP_VIEWBOX_WIDTH = HEATMAP_COLS * HEATMAP_CELL_SIZE + (HEATMAP_COLS - 1) * HEATMAP_GAP; const HEATMAP_VIEWBOX_HEIGHT = HEATMAP_ROWS * HEATMAP_CELL_SIZE + (HEATMAP_ROWS - 1) * HEATMAP_GAP; function HeatmapGrid({ data, className }: HeatmapGridProps) { const gridData = useMemo(() => { if (!data || data.length === 0) { return generateRandomGrid(HEATMAP_ROWS, HEATMAP_COLS); } return data; }, [data]); const rows = gridData.length; const cols = gridData[0]?.length || 0; const cells = useMemo(() => { const result: Array<{ x: number; y: number; opacity: number; key: string; }> = []; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const value = gridData[row]?.[col] ?? 0; result.push({ x: col * (HEATMAP_CELL_SIZE + HEATMAP_GAP), y: row * (HEATMAP_CELL_SIZE + HEATMAP_GAP), opacity: Math.max(0.05, Math.min(1, value)), key: `${row}-${col}`, }); } } return result; }, [gridData, rows, cols]); return ( ); } export function GitHubContributions({ owner, repo, staticContributions, staticData, className, ...props }: GitHubContributionsProps) { const [data, setData] = useState(staticData || []); const [contributors, setContributors] = useState( staticContributions ?? null, ); const [loading, setLoading] = useState(!staticData); const [error, setError] = useState(null); useEffect(() => { if (staticData && staticContributions !== undefined) return; async function fetchData() { try { setLoading(true); setError(null); const activityResponse = await fetch( `https://api.github.com/repos/${owner}/${repo}/stats/commit_activity`, ); if (activityResponse.status === 202) { setTimeout(() => fetchData(), 1000); return; } if (!activityResponse.ok) { throw new Error("Failed to fetch contribution data"); } const activityData = await activityResponse.json(); if (!activityData || !Array.isArray(activityData)) { setData( Array(7) .fill(null) .map(() => Array(12).fill(0.1)), ); } else { const weeks = activityData.slice(-12); const allCounts = weeks.flatMap((w: { days: number[] }) => w.days); const maxCount = Math.max(...allCounts, 1); const grid: number[][] = []; for (let day = 0; day < 7; day++) { const row: number[] = []; for (const week of weeks) { const count = week.days[day] || 0; row.push(count / maxCount); } grid.push(row); } setData(grid); } const contributorsResponse = await fetch( `https://api.github.com/repos/${owner}/${repo}/contributors?per_page=1`, ); if (contributorsResponse.ok) { const linkHeader = contributorsResponse.headers.get("link"); if (linkHeader) { const match = linkHeader.match(/page=(\d+)>; rel="last"/); if (match) { setContributors(parseInt(match[1], 10)); } } else { const contributorData = await contributorsResponse.json(); setContributors(contributorData.length); } } } catch (err) { setError(err instanceof Error ? err.message : "Unknown error"); } finally { setLoading(false); } } fetchData(); }, [owner, repo, staticContributions, staticData]); if (loading) { return (

); } if (error) { return (

{error}

); } return (

{contributors !== null ? contributors.toLocaleString() : "—"} Contributors to {owner}/{repo} Last 12 weeks

); } 53:T5d5,import { GitHubContributions } from "@/registry/default/blocks/github/github-contributions/components/elements/github-contributions"; export default function GitHubContributionsPage() { return (

GitHub Contributions

Display contribution activity grid like GitHub's profile.

Features

Fetches real-time contribution data from GitHub API
Shows commit activity over last 12 weeks
Uses HeatmapGrid primitive for visualization
Loading and error states included
Handles GitHub API rate limiting gracefully

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.tryelements.dev/r/github-contributions.json","proxyUrl":"https://shadcnregistry.com/r/elements/github-contributions","itemId":"@elements/github-contributions"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/default/blocks/github/github-contributions/components/elements/github-contributions.tsx","content":"$52","type":"registry:component"},{"path":"registry/default/blocks/github/github-contributions/routes/layout.tsx","content":"import { Geist, Geist_Mono } from \"next/font/google\";\n\nconst geistSans = Geist({\n variable: \"--font-geist-sans\",\n subsets: [\"latin\"],\n});\n\nconst geistMono = Geist_Mono({\n variable: \"--font-geist-mono\",\n subsets: [\"latin\"],\n});\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n \n \n {children}\n \n \n );\n}\n","type":"registry:page","target":"app/layout.tsx"},{"path":"registry/default/blocks/github/github-contributions/routes/page.tsx","content":"$53","type":"registry:page","target":"app/github-contributions/page.tsx"}]}]]}],"$L54"]}]

GitHub Contributions

Installation

Files

components

app

Styles