4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:Td77,"use client"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; interface GitHubStarButtonProps extends React.ButtonHTMLAttributes { owner: string; repo: string; staticCount?: number; showCount?: boolean; variant?: "default" | "outline"; } function formatNumber(num: number): string { if (num >= 1000000) { return `${(num / 1000000).toFixed(1)}M`; } if (num >= 1000) { return `${(num / 1000).toFixed(1)}K`; } return num.toString(); } function StarIcon({ className }: { className?: string }) { return ( ); } export function GitHubStarButton({ owner, repo, staticCount, showCount = true, variant = "default", className, onClick, ...props }: GitHubStarButtonProps) { const [count, setCount] = useState(staticCount ?? null); const [loading, setLoading] = useState(staticCount === undefined); const [isHovered, setIsHovered] = useState(false); useEffect(() => { if (staticCount !== undefined) return; async function fetchCount() { try { setLoading(true); const response = await fetch( `https://api.github.com/repos/${owner}/${repo}` ); if (response.ok) { const data = await response.json(); setCount(data.stargazers_count); } } catch { // Silently fail - count will remain null } finally { setLoading(false); } } fetchCount(); }, [owner, repo, staticCount]); const handleClick = (e: React.MouseEvent) => { window.open(`https://github.com/${owner}/${repo}`, "_blank"); onClick?.(e); }; const baseStyles = "inline-flex items-center gap-2 h-9 px-4 rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"; const variantStyles = { default: "bg-foreground text-background hover:bg-foreground/90 active:scale-[0.98]", outline: "border border-border bg-background hover:bg-accent hover:border-foreground/20 active:scale-[0.98]", }; return ( ); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.tryelements.dev/r/github-star-button.json","proxyUrl":"https://shadcnregistry.com/r/elements/github-star-button","itemId":"@elements/github-star-button"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/default/blocks/github/github-star-button/components/elements/github-star-button.tsx","content":"$51","type":"registry:component"}]}]]}],"$L52"]}]

GitHub Star Button

Installation

Files

components

Styles