GitHub Stars Button

Sizes

Variants

Installation

Usage

import { GitHubStarsButton } from "@/components/ui/github-stars-button";
 
export default function Example() {
  return <GitHubStarsButton repo="heygaia/gaia" />;
}

Examples

Different Repositories

<GitHubStarsButton repo="vercel/next.js" />
<GitHubStarsButton repo="facebook/react" />
<GitHubStarsButton repo="microsoft/vscode" />

Without Label

<GitHubStarsButton repo="heygaia/gaia" showLabel={false} />

Different Sizes

<GitHubStarsButton repo="heygaia/gaia" size="sm" />
<GitHubStarsButton repo="heygaia/gaia" size="default" />
<GitHubStarsButton repo="heygaia/gaia" size="lg" />

Custom Styling

<GitHubStarsButton
  repo="heygaia/gaia"
  className="hover:scale-105 transition-transform"
/>

Features

• Real-time Data: Fetches star count from GitHub API on mount
• Loading State: Shows "..." while loading star count
• Error Handling: Gracefully handles fetch errors
• Click to Repository: Opens the GitHub repository in a new tab
• Hover Effects: Star icon turns yellow on hover
• Responsive: Works on all screen sizes
• Lightweight: No external dependencies except React and Radix Icons

Props

Notes

• The component uses GitHub's public API which has rate limiting (60 requests/hour for unauthenticated requests)
• Star count is fetched once on component mount
• The component automatically cleans up on unmount to prevent memory leaks