GitHub Stars Button

A beautiful button that displays your GitHub repository's star count with real-time data fetching.

Sizes

Variants

With Label

Without Label

Usage in Gaia

Social proof on the landing page. Live stats from our repo.

Installation

npx shadcn@latest add https://ui.heygaia.io/r/github-stars-button.json

Usage

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

Examples

Different Repositories

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

Without Label

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

Different Sizes

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

Custom Styling

<GitHubStarsButton
  repo="theexperiencecompany/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

Prop	Type	Default	Description
repo	string	-	GitHub repository (owner/repo)
showLabel	boolean	true	Whether to show "GitHub" label
size	"sm" \| "default" \| "lg"	"sm"	Size of the button
className	string	undefined	Additional CSS classes

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

File Preview Goal Card

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.