import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; const githubStarsVariants = cva("gap-1.5 pr-1.5 pl-2", { variants: { size: { default: "h-9 text-sm", sm: "h-8 text-xs", lg: "h-10 text-base pr-2 pl-2.5", }, }, defaultVariants: { size: "default", } }); interface GitHubStarsProps extends VariantProps { repo: string; locales?: Intl.LocalesArgument; className?: string; } async function getStarCount(repo: string): Promise { try { const res = await fetch(`https://api.github.com/repos/${repo}`, { next: { revalidate: 86400 }, }); if (!res.ok) return 0; const data = (await res.json()) as { stargazers_count?: number }; return Number(data?.stargazers_count) || 0; } catch { return 0; } } export async function GitHubStars({ repo, // GitHub repository in `owner/repo` format. locales = "en-US", // Optional locales for number formatting className, // Optional class name for Styling size // Optional size for the button }: GitHubStarsProps) { const count = await getStarCount(repo); const formatted = new Intl.NumberFormat(locales, { notation: "compact", compactDisplay: "short", }) .format(count) .toLowerCase(); const full = new Intl.NumberFormat(locales).format(count); return ( {full} stars ); }

Prop	Type	Description
repo	`string`	Repository path (owner/repo)
label	`string`	Label to display
className	`string`	Optional Class name to style the component

GitHub Stars

Preview

Installation

Usage

Props

Dependencies

Become a Sponsor