shadcn.io is not affiliated with official shadcn/ui
The button links to a repository and shows how many stars it has, in a short form such as 12.3k. It asks GitHub for the count in the browser, once per repository per page load, and the number rises and fades in when it lands. Hovering fills and turns the star.
Use it on an open source project's home page, docs header or portfolio. When you already know the count, from your server or at build time, pass count and the button never fetches. If GitHub can't be reached or the rate limit is hit, the button shows its label alone. It's a plain link drawn with the Button's styles, so variant, size and pill work. The count's entrance and the star's turn are CSS transitions, with no animation library, and both stay still with reduced motion.
Installation
Usage
import { GitHubStarsButton } from "@/components/ui/github-stars-button";<GitHubStarsButton repo="ui" username="shadcn-ui" />Demos
Static Count
count sets the number and skips the request, so nothing depends on GitHub. Counts of a thousand or more are shortened, 12,345 to 12.3k and 1,250,000 to 1.3m; smaller ones show in full.
Label
The label is the button's children, Star by default. Change it to fit the page, and pick any variant, size and pill.
Accessibility
The button is a link, announced with its label, the full star count (12,345 stars, not 12.3k) and a note that it opens in a new tab. The GitHub mark and the star are hidden from assistive tech. While the count loads, its placeholder is silent.
- Enter
- Open the repository in a new tab.
FAQ
When does it fetch the star count?
Once the button is in the browser, never on the server. Buttons for the same repository share one request, kept for as long as the page is loaded, so moving between pages of a single-page app doesn't ask again.
How do I avoid the request?
Pass count with a number you already have, from your server or your build. The button shows it and never calls GitHub, as in the Static Count demo.
What happens when GitHub can't be reached?
The button shows its label without a count, and it's still a working link. The next page load tries again.
Will it hit GitHub's rate limit?
GitHub allows about 60 unauthenticated requests an hour per visitor. One request per repository per page load stays under that for most visits. For a busy page, pass count from a server that fetches with a token and caches it.
What shows while the count loads?
A small pulsing placeholder about three digits wide, so the button barely moves when the number lands; then the number rises into place. With reduced motion the placeholder doesn't pulse and the number just appears.
API Reference
GitHubStarsButton
<a> data-slot="button"
repostring
The repository's name, as in its URL.
usernamestring
The repository's owner: a user or an organization, as in its URL.
children?ReactNode
The label before the count.
- Default
"Star"
count?number
A star count you already have, from your server or build: the button shows it and never fetches.
pill?boolean
Round ends, as on the Button.
- Default
false
size?ButtonProps["size"]
The Button size it takes.
- Default
"md"
variant?ButtonProps["variant"]
The Button variant it takes.
- Default
"outline"
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
data-size?string
Mirrors size.
data-variant?string
Mirrors variant.
Related
Icon Button
Hover revealsA star toggle for your own app
- Pro
Counter Button
ControlsAnimated numbers on a button
Copy Button
Progress & resultsCopy the install command next
Arrow Button
Hover revealsLink out to the docs
- Pro
Glow Border Button
Glow & lightDraw the eye to the repo link
Loading Button
Progress & resultsWaiting on data, done another way