4f: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"] 50: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"] 51: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"] 52:T1120,"use client"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { useEffect, useState } from "react"; 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; // GitHub repository in `owner/repo` format. locales?: Intl.LocalesArgument; // Optional locales for number formatting. See [MDN - Intl - locales argument](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). className?: string; // Optional class name for Styling } const CACHE_KEY = (repo: string) => `groot-studio:github-stars:${repo}`; const CACHE_TTL = 86400 * 1000; function getCached(repo: string): number | null { try { const raw = localStorage.getItem(CACHE_KEY(repo)); if (!raw) return null; const { value, timestamp } = JSON.parse(raw); if (Date.now() - timestamp > CACHE_TTL) return null; return value; } catch { return null; } } function setCache(repo: string, value: number) { try { localStorage.setItem( CACHE_KEY(repo), JSON.stringify({ value, timestamp: Date.now() }), ); } catch { } } export function GitHubStars({ repo, locales = "en-US", className, size }: GitHubStarsProps) { const [count, setCount] = useState(null); useEffect(() => { const cached = getCached(repo); if (cached !== null) { setCount(cached); return; } fetch(`https://api.github.com/repos/${repo}`) .then((res) => res.json()) .then((data) => { const stars = Number(data?.stargazers_count) || 0; setCount(stars); setCache(repo, stars); }) .catch(() => setCount(0)); }, [repo]); const formatted = count === null ? "..." : new Intl.NumberFormat(locales, { notation: "compact", compactDisplay: "short", }) .format(count) .toLowerCase(); const full = count === null ? "Loading..." : `${new Intl.NumberFormat(locales).format(count)} stars`; return ( {full} ); } 4b:["$","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":[]}],["$","$L4f",null,{"registryDependencies":["button","tooltip"]}]]}],["$","$L50",null,{"sourceUrl":"https://grootstudio.vercel.app/r/github-stars-react.json","proxyUrl":"https://shadcnregistry.com/r/grootstudio/github-stars-react","itemId":"@grootstudio/github-stars-react"}],["$","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"}],["$","$L51",null,{"files":[{"path":"registry/radix-nova/github-stars-react/github-stars-react.tsx","content":"$52","type":"registry:component","target":"@components/grootstudio/github-stars-react.tsx"}]}]]}],"$L53"]}]

GitHub Stars (React / Vite)

Installation

Files

@components

Styles