Server-rendered GitHub repository card with cached metadata, topics, language, and repository stats.
| Prop | Type | Default |
|---|---|---|
ownerGitHub username or organization. | string | — |
repoGitHub repository name. | string | — |
dataOptional pre-fetched repository data that skips the API request. | GitHubRepoData | — |
variantSurface style for the card. | "default" | "outline" | "muted" | "ghost" | "default" |
sizeCard spacing and corner radius. | "sm" | "default" | "lg" | "default" |
showLanguageShow the primary language and colored dot. | boolean | true |
showTopicsShow GitHub topics. | boolean | true |
showLicenseShow SPDX license identifier. | boolean | true |
showUpdatedShow relative last-push time. | boolean | true |
maxTopicsMaximum topic tags before a remaining-count badge. | number | 4 |
classNameAdditional classes for the link card. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { GitHubRepoCard } from "@/components/ui/github-repo-card"export default function Page() {
return <GitHubRepoCard owner="shadcn-ui" repo="ui" />
}