GitHub Repo List
List GitHub repositories with language, fork origin, and star counts.
Features
- Renders a repository name, description, primary language, and star count.
- Marks forks with their upstream repository.
- Formats star counts compactly and links every row to GitHub.
- Presentational and prop-driven, so it works with data from any source.
Installation
pnpm dlx shadcn@latest add @ompatil/github-repo-list
Usage
import { GitHubRepoList } from "@/components/github-repo-list"
import type { GitHubRepo } from "@/lib/get-github-data/github-data"
const REPOS: GitHubRepo[] = [
{
id: 1,
name: "langchain",
fullName: "ompatil1906/langchain",
url: "https://github.com/ompatil1906/langchain",
description: "Build context-aware reasoning applications.",
language: "Python",
stars: 0,
isFork: true,
upstream: "langchain-ai/langchain",
pushedAt: "2026-02-18T10:00:00.000Z",
},
{
id: 2,
name: "dspy",
fullName: "ompatil1906/dspy",
url: "https://github.com/ompatil1906/dspy",
description:
"The framework for programming, not prompting, language models.",
language: "Python",
stars: 0,
isFork: true,
upstream: "stanfordnlp/dspy",
pushedAt: "2026-02-11T10:00:00.000Z",
},
{
id: 3,
name: "GeoVisionAI",
fullName: "ompatil1906/GeoVisionAI",
url: "https://github.com/ompatil1906/GeoVisionAI",
description: "Geospatial vision models for satellite imagery.",
language: "Python",
stars: 1,
isFork: false,
upstream: null,
pushedAt: "2026-02-02T10:00:00.000Z",
},
]
export default function GitHubRepoListDemo() {
return (
<div className="w-full max-w-xl p-4">
<GitHubRepoList repos={REPOS} className="rounded-xl border border-line" />
</div>
)
}API reference
GitHubRepoList
Prop
Type
Data
Pair the list with the get-github-data library to fetch live repositories:
import { getCachedGithubData } from "@/lib/get-github-data/get-cached-github-data"
import { GitHubRepoList } from "@/components/github-repo-list"
export async function Repositories() {
const data = await getCachedGithubData("vercel")
return <GitHubRepoList repos={data?.owned ?? []} />
}