Name: Elements
Author: Railly Hugo

Overview

An interactive button component that displays a repository's star count and links to the GitHub repository. Perfect for call-to-action elements encouraging users to star your project.

Installation

bunx shadcn@latest add @elements/github-star-button

Usage

import { GitHubStarButton } from "@/components/elements/github/github-star-button";

export function CallToAction() {
  return (
    <div className="flex gap-4">
      <GitHubStarButton owner="shadcn-ui" repo="ui" />
      <GitHubStarButton owner="vercel" repo="next.js" variant="outline" />
    </div>
  );
}

Props

Prop	Type	Default	Description
`owner`	`string`	-	GitHub repository owner
`repo`	`string`	-	GitHub repository name
`variant`	`"default" \| "outline"`	`"default"`	Button style variant
`showCount`	`boolean`	`true`	Show the star count
`staticCount`	`number`	-	Static star count (bypasses API)
`className`	`string`	-	Additional CSS classes

Variants

Default

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

Outline

<GitHubStarButton owner="shadcn-ui" repo="ui" variant="outline" />

Without Count

<GitHubStarButton owner="shadcn-ui" repo="ui" showCount={false} />

Environment Variables

For higher API rate limits:

GITHUB_TOKEN=your_github_token

Features

Fetches real-time star count from GitHub API
Opens repository in new tab on click
Hover animation on star icon
Two style variants: default and outline
Built-in loading state for count

GitHub Repo Card

GitHub Stars

Elements

Command Palette

GitHub Star Button