Skip to main content
A beautiful button component that displays your GitHub repository’s star count with real-time data fetching from the GitHub API.

​
Installation

    ​
    Usage

    import { GitHubStarsButton } from "@/components/ui/github-stars-button";

export default function Example() {
  return <GitHubStarsButton repo="theexperiencecompany/gaia" />;
}

    ​
    Without Label

    Hide the “GitHub” label by setting showLabel to false: 
    <GitHubStarsButton repo="theexperiencecompany/gaia" showLabel={false} />

    ​
    Sizes

    The button supports three sizes through the size prop: 
    <GitHubStarsButton repo="theexperiencecompany/gaia" size="sm" />
<GitHubStarsButton repo="theexperiencecompany/gaia" size="default" />
<GitHubStarsButton repo="theexperiencecompany/gaia" size="lg" />

    ​
    Variants

    ​
    Props

    ​
    repo
    string
    required
    The GitHub repository in the format owner/repo (e.g., "theexperiencecompany/gaia").
    ​
    showLabel
    boolean
    default:"true"
    Whether to show the “GitHub” label text next to the icon.
    ​
    size
    'sm' | 'default' | 'lg'
    default:"sm"
    The size of the button. Inherits from the Raised Button component.
    ​
    className
    string
    Additional CSS classes to apply to the button.

    ​
    Features

    • Real-time Data: Fetches star count from GitHub API on component mount
    • Loading State: Shows loading indicator while fetching data
    • Error Handling: Gracefully handles API failures
    • Responsive: Built on the Raised Button component with all its features
    • Hover Effect: Star icon changes to yellow on hover
    • Direct Link: Clicking opens the GitHub repository in a new tab
    • Memory Safe: Properly cleans up side effects to prevent memory leaks

    ​
    API Rate Limiting

    The GitHub API has rate limits for unauthenticated requests:
    • 60 requests per hour per IP address
    • Consider implementing caching if you expect high traffic
    • For production use with higher limits, consider adding a GitHub token

    ​
    Accessibility

    • Semantic <a> tag for proper link behavior
    • target="_blank" with rel="noopener noreferrer" for security
    • Inherits all accessibility features from Raised Button
    • Loading state communicated through text content

    Build docs developers (and LLMs) love

    Get started for freeTalk to us