Overview

A full-stack component that fetches repository information from GitHub and displays it in a clean, linkable card with name, description, stars, forks, and primary language.

Installation

bunx shadcn@latest add @elements/github-repo-card

Usage

import { GitHubRepoCard } from "@/components/elements/github/github-repo-card";

export function ProjectShowcase() {
  return <GitHubRepoCard owner="shadcn-ui" repo="ui" />;
}

Props

Static Data Shape

{
  name: string;
  description: string | null;
  stargazers_count: number;
  forks_count: number;
  language: string | null;
}

Environment Variables

For higher API rate limits:

GITHUB_TOKEN=your_github_token

Features

• Fetches real-time repository data from GitHub API
• Displays name, description, stars, forks, and language
• Clickable card linking to the repository
• Language indicator with official GitHub colors
• Built-in loading and error states