50: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"] 51: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"] 52: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"] 53:T3e34,'use client'; import { useMemo, useState } from 'react'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Card } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Linkedin, Mail, Search, Loader2, Share2, Globe } from 'lucide-react'; import { Icons } from '@/components/icon'; interface GitHubUser { login: string; name: string; bio: string; avatar_url: string; followers: number; following: number; public_repos: number; html_url: string; email?: string; twitter_username?: string; blog?: string; } interface ContributionDay { date: string; level: number; count: number; } const contributionColorClasses = [ 'bg-[#ebedf0] dark:bg-[#212121]', 'bg-[#9be9a8] dark:bg-[#404040]', 'bg-[#40c463] dark:bg-[#606060]', 'bg-[#30a14e] dark:bg-[#808080]', 'bg-[#216e39] dark:bg-[#c6c6c6]', ]; function generateContributions(): ContributionDay[] { const contributions: ContributionDay[] = []; const today = new Date(); const startDate = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); const startSunday = new Date(startDate); startSunday.setDate(startDate.getDate() - startDate.getDay()); for (let i = 0; i < 371; i++) { const date = new Date(startSunday); date.setDate(startSunday.getDate() + i); const dayOfWeek = date.getDay(); const isWeekend = dayOfWeek === 0 || dayOfWeek === 6; const intensity = (isWeekend ? 0.2 : 0.6) * Math.random(); let level = 0; let count = 0; if (intensity > 0.7) { level = 4; count = Math.floor(Math.random() * 10) + 10; } else if (intensity > 0.5) { level = 3; count = Math.floor(Math.random() * 8) + 5; } else if (intensity > 0.3) { level = 2; count = Math.floor(Math.random() * 5) + 2; } else if (intensity > 0.1) { level = 1; count = Math.floor(Math.random() * 3) + 1; } contributions.push({ date: date.toISOString().split('T')[0], level, count, }); } return contributions; } function formatNumber(num: number) { if (num >= 1000) return `${(num / 1000).toFixed(1)}k`; return num.toString(); } function getMonthLabels() { const months = []; const today = new Date(); for (let i = 11; i >= 0; i--) { const date = new Date(today.getFullYear(), today.getMonth() - i, 1); months.push(date.toLocaleDateString('en-US', { month: 'short' })); } return months; } function organizeContributionsByWeek(contributions: ContributionDay[]) { const weeks: ContributionDay[][] = []; for (let index = 0; index < contributions.length; index += 7) { weeks.push(contributions.slice(index, index + 7)); } return weeks; } function shareToTwitter() { const text = `I have generated my GitHub card from Spectrum UI! 🚀\n\nGenerate yours: ${window.location.href}\n\n#GitHub #SpectrumUI #Developer`; const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`; window.open(url, '_blank'); } function shareToLinkedIn() { const text = 'I have generated my GitHub card from Spectrum UI! Check out this tool to showcase your GitHub profile.'; const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(window.location.href)}&summary=${encodeURIComponent(text)}`; window.open(url, '_blank'); } function copyShareLink() { const text = `I have generated my GitHub card from Spectrum UI! Generate yours: ${window.location.href}`; navigator.clipboard.writeText(text); alert('Link copied to clipboard!'); } export default function GitHubProfileCard() { const [username, setUsername] = useState(''); const [userData, setUserData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const fetchGitHubUser = async (username: string) => { setLoading(true); setError(null); try { const response = await fetch(`https://api.github.com/users/${username}`); if (!response.ok) { if (response.status === 404) { throw new Error('User not found'); } else if (response.status === 403) { throw new Error('API rate limit exceeded'); } else { throw new Error('Failed to fetch user data'); } } const data: GitHubUser = await response.json(); setUserData(data); } catch (err) { setError(err instanceof Error ? err.message : 'An error occurred'); setUserData(null); } finally { setLoading(false); } }; const handleSearch = () => { if (username.trim()) { fetchGitHubUser(username.trim()); } }; const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handleSearch(); } }; const contributions = useMemo(generateContributions, []); const contributionWeeks = useMemo( () => organizeContributionsByWeek(contributions), [contributions], ); const monthLabels = useMemo(getMonthLabels, []); return (

setUsername(e.target.value)} onKeyDown={handleKeyPress} className="bg-white dark:bg-neutral-900 border-neutral-300 dark:border-neutral-700 text-neutral-900 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 rounded-xl" />

{error && (

{error}

)} {userData && ( <>

{(userData.name || userData.login).charAt(0).toUpperCase()} {/* Name and Bio */}

{userData.name || userData.login}

{userData.bio || 'GitHub Developer'}

{/* Social Icons */}

{userData.twitter_username && ( )} {userData.blog && ( )} {userData.email && ( )}

{/* Stats */}

{formatNumber(userData.followers)}

Followers

{formatNumber(userData.following)}

Following

{formatNumber(userData.public_repos)}

Repositories

{/* Contribution Graph */}

{/* Month labels */}

{monthLabels.map((month, index) => ( {month} ))}

{/* Contribution grid - GitHub style */}

{/* Day labels */}

Mon Wed Fri

{/* Grid container */}

{contributionWeeks.map((week) => (

{week.map((day) => (

))}

{/* Legend */}

Learn how we count contributions

Less

{[0, 1, 2, 3, 4].map((level) => (

))}

{/* Share Section */}

Share Your GitHub Card

I have generated my GitHub card from Spectrum UI! Generate yours and showcase your profile.

)} {/* Default state message */} {!userData && !loading && !error && (

Enter a GitHub username to view their profile card

Try searching for popular users like "arihantcodes", "torvalds"

)}

); } 54:T3b7d, type IconProps = React.HTMLAttributes; export const Icons = { logo: (props: IconProps) => ( ), twitter: (props: IconProps) => ( ), gitHub: (props: IconProps) => ( ), radix: (props: IconProps) => ( ), aria: (props: IconProps) => ( ), npm: (props: IconProps) => ( ), yarn: (props: IconProps) => ( ), react: (props: IconProps) => ( ), tailwind: (props: IconProps) => ( ), google: (props: IconProps) => ( ), apple: (props: IconProps) => ( ), paypal: (props: IconProps) => ( ), spinner: (props: IconProps) => ( ), driver: (props: IconProps) => ( ), shadcnblock:(props: IconProps) => ( ), typeScript: (props: IconProps) => ( ) };4c:["$","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":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["avatar","button","card","input"]}]]}],["$","$L51",null,{"sourceUrl":"https://ui.spectrumhq.in/r/github-profile-card.json","proxyUrl":"https://shadcnregistry.com/r/spectrumui/github-profile-card","itemId":"@spectrumui/github-profile-card"}],["$","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"}],["$","$L52",null,{"files":[{"path":"components/spectrumui/github-profile-card.tsx","content":"$53","type":"registry:component","target":"components/spectrumui/github-profile-card.tsx"},{"path":"components/icon.tsx","content":"$54","type":"registry:component","target":"components/icon.tsx"}]}]]}],"$L55"]}]

GitHub Profile Card

Installation

Files

components

Styles