GitHub Stars Button

A GitHub repo button with automatic star fetching and animated Counter digits.

github-stars-button

GitHub0

0px

Customize

Edit props; preview updates instantly.

Customize

Variant

Format

Counter

Hover

Hover duration

300ms

RepositoryLive data via /api/github-stars

github.com//

Try

Props

Props accepted by GithubStarsButton.

Prop	Type	Default	Description
username	string	—	GitHub username or organization.
repo	string	—	GitHub repository name.
label	string	"GitHub"	Button label.
value	number	—	Controlled star count. When provided, automatic fetching is skipped.
initialValue	number	0	Fallback star count shown before the API request resolves.
fetchStars	boolean	true when value is undefined	Fetch the repository star count automatically when the component is uncontrolled.
apiEndpoint	string	—	Optional proxy endpoint. It receives `owner` and `repo` query params and should return `{ stars }`.
showCount	boolean	true	Show the animated star count beside the label.
counterEffect	"simple" \| "wheel" \| "smooth" \| "fade" \| "3d"	"3d"	Counter animation effect used for the star count.
variant	"default" \| "star" \| "ghost" \| "solid" \| "silver"	"default"	Visual palette. `silver` paints the brand silver gradient with dark text; `star` tints with yellow; `solid` is a deep black surface; `ghost` is borderless until hover.
displayFormat	"full" \| "compact" \| "plus"	"compact"	How the star count renders. `full` → 14,021. `compact` → 14k. `plus` → 14000+.
hoverMode	"none" \| "label" \| "full"	"none"	On hover: `label` swaps just the label text, `full` cross-fades the entire inner content for a call-to-action.
hoverLabel	string	"Star this"	Label shown on hover when `hoverMode="label"`.
hoverContent	ReactNode	"Star on GitHub"	Inner content shown on hover when `hoverMode="full"`.
hoverDuration	number	300	Duration in milliseconds of the hover content swap (`label` / `full` modes). Higher = slower, more deliberate feel.
href	string	computed GitHub repo URL	Override the generated repository URL.
className	string	—	Extra class names merged onto the anchor button.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/github-stars-button.json

Usage

Import the component and drop it into a render.

demo.tsx11 lines

import { GithubStarsButton } from "@/components/lazy-ui/github-stars-button";

export function Demo() {
  return (
    <GithubStarsButton
      username="zivhdinfo"
      repo="lazy-ui"
      initialValue={12848}
    />
  );
}