GitHub Stars – Aspandiyar

Display GitHub repo star count with formatted numbers and full-count tooltip.

Loading…

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@latest add @ncdai/github-stars

Usage

import { GithubStars } from "@/components/github-stars"

<GithubStars repo="ncdai/chanhdai.com" stargazersCount={2050} />

API reference

GitHubStars

Prop

Type

Examples

Fetching GitHub stars with server component

import { addQueryParams } from "@/utils/url"
 
import { UTM_PARAMS } from "@/config/site"
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { GitHubIcon } from "@/components/icons"
import { SOCIAL } from "@/features/portfolio/data/social-links"
 
export function NavItemGitHub() {
  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <Button
            className="gap-1.5 border-none px-1.5"
            variant="ghost"
            size="sm"
            nativeButton={false}
            render={
              <a
                href={addQueryParams(SOCIAL.github.href, UTM_PARAMS)}
                target="_blank"
                rel="noopener"
              >
                <GitHubIcon />
                <span className="text-[0.8125rem]/none text-muted-foreground">
                  {SOCIAL.github.handle}
                </span>
                <span className="sr-only">GitHub profile</span>
              </a>
            }
          />
        }
      />
      <TooltipContent>{SOCIAL.github.href}</TooltipContent>
    </Tooltip>
  )
}