GitHub Stars
Display GitHub repository star count with formatted numbers and a tooltip showing the full count.
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 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
import { SOURCE_CODE_GITHUB_REPO } from "@/config/site";
import { GitHubStars } from "@/components/ncdai/github-stars";
async function getStargazerCount() {
try {
const response = await fetch(
`https://api.github.com/repos/${SOURCE_CODE_GITHUB_REPO}`,
{
headers: {
Accept: "application/vnd.github+json",
Authorization: `Bearer ${process.env.GITHUB_API_TOKEN}`,
"X-GitHub-Api-Version": "2022-11-28",
},
next: { revalidate: 86400 }, // Cache for 1 day (86400 seconds)
}
);
if (!response.ok) {
return 0;
}
const json = await response.json();
return Number(json?.stargazers_count) || 0;
} catch {
return 0;
}
}
export async function NavItemGitHub() {
const stargazersCount = await getStargazerCount();
return (
<GitHubStars
repo={SOURCE_CODE_GITHUB_REPO}
stargazersCount={stargazersCount}
/>
);
}