GitHub Star Button

Installation

pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add https://ui.sanjid.shop/r/star-button.json

Props

Features

• Displays live star count from GitHub API
• Smooth hover and tap animations
• Responsive design
• Animated star icon on hover
• Formatted star count (e.g., 1.5k for 1500 stars)

Usage

1"use client";2
3import { GithubStarButton } from "@/components/ui/github-star-button";4
5export function MyComponent() {6  return (7    <div className="flex items-center justify-center p-8">8      <GithubStarButton owner="shadcn" repo="ui" />9    </div>10  );11}

Customization

You can customize the button's appearance by passing a custom className:

1<GithubStarButton2  owner="shadcn"3  repo="ui"4  className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700"5/>

Notes

• The component makes an API call to GitHub to fetch the current star count
• The star count is cached by GitHub's API, so it may not update in real-time
• For frequent updates, consider implementing client-side caching or using GitHub's webhooks