GitHub Stars Button

Link button showing a GitHub repo's star count with the octocat icon. Async server component — fetches data at build time with ISR.

Preview

109.3k

Installation

$ shadcn add https://ui.justinlevine.me/r/github-stars-button.json

Usage

import { GitHubStarsButton } from "@/components/github-stars-button"

<GitHubStarsButton owner="shadcn-ui" repo="ui" />

Async server component. Fetches the GitHub API at build time and caches the result for 1 hour via Next.js ISR. No API key required — set GITHUB_TOKEN to raise the rate limit from 60 to 5,000 requests/hour.

Playground

109.3k

Props

variant

size

showRepoiconStyle

import { GitHubStarsButton } from "@/components/github-stars-button"

<GitHubStarsButton owner="shadcn-ui" repo="ui" />

Examples

Variants

Default

Secondary

Outline

Ghost

Subtle

Sizes

Small

109.3k

Default

109.3k

Large

109.3k

With repo name

Default + Repo

shadcn-ui/ui109.3k

Secondary + Repo

shadcn-ui/ui109.3k

Outline + Repo

vercel/next.js138.3k

Icon styles

Current Color

GitHub Green

Copilot Purple

Muted

Secondary + GitHub Green

shadcn-ui/ui109.3k

Secondary + Copilot Purple

shadcn-ui/ui109.3k

API Reference

GitHubStarsButton

PropType

Notes

ISR caching. Results cached for 1 hour via next.revalidate.
Pre-fetched stars. Pass the stars prop to skip the API call entirely.