██
Components
PreviousNext

GitHub Stars

Display GitHub repository star count with formatted numbers and a tooltip showing the full count.

Open in
Loading...
import { GitHubStars } from "@/components/ncdai/github-stars";
 
export function GitHubStarsDemo() {
  return <GitHubStars repo="ncdai/chanhdai.com" stargazersCount={1050} />;
}

Features

  • Displays the star count of a specified GitHub repository.
  • Optical alignment for better visual balance with the GitHub icon.
  • Formats large numbers for better readability (e.g., 1.2k for 1200).
  • Includes a tooltip that shows the full star count on hover.

Installation

pnpm dlx shadcn add @ncdai/github-stars

Usage

import { GithubStars } from "@/components/ncdai/github-stars";
<GithubStars repo="ncdai/chanhdai.com" stargazersCount={1050} />

Examples

Fetching GitHub Stars with Server Component