Installation
Examples
Neo Brutalist Theme
Modern Dark Theme
A utility-first CSS framework for rapid UI development.
Activity
Last 12 weeks68,000Stars
3,500Forks
1,800Watchers
95Issues
JavaScript
cssframeworkdesign+1 more
Usage
import { GitHubRepoCard } from "@/components/ui/github-repo-card";export default function MyComponent() {
return (
<div className="w-full max-w-md mx-auto">
<GitHubRepoCard
theme="modern-dark"
repo={{
name: "ui",
owner: "shadcn",
ownerAvatar: "https://avatars.githubusercontent.com/u/124599?v=4",
description: "Beautifully designed components built with Radix UI and Tailwind CSS.",
stars: 42000,
forks: 3600,
watchers: 1600,
issues: 310,
language: "TypeScript",
updatedAt: "2025-04-07T14:18:57Z",
topics: ["ui", "components", "tailwindcss", "radix"],
activityData: [0.4, 0.5, 0.6, 0.8, 0.7, 0.9, 1.0, 0.9, 0.8, 0.7, 0.9, 1.0],
isPrivate: false,
}}
/>
</div>
);
}Props
GitHub Repo Card
| Prop | Type | Default | Description |
|---|---|---|---|
repo | RepoData | undefined | Required. Repository data object containing all information to display on the card. |
theme | string | modern-light | Visual theme for the card. Available options: "modern-dark", "modern-light", "cyberpunk", "neo-brutalist", "aurora", "forest". |
className | string | undefined | Additional CSS classes to apply to the card container. |
RepoData Type
| Property | Type | Default | Description |
|---|---|---|---|
name | string | - | Repository name (e.g., 'next.js'). |
owner | string | - | Repository owner username or organization name (e.g., 'vercel'). |
stars | number | - | Number of repository stars. |
forks | number | - | Number of repository forks. |
watchers | number | - | Number of repository watchers. |
issues | number | - | Number of open issues in the repository. |
updatedAt | string | - | ISO date string of when the repository was last updated. |
ownerAvatar | string | undefined | URL to the owner's avatar image. If not provided, shows initials fallback. |
description | string | undefined | Repository description. Shows "No description provided" if omitted. |
language | string | undefined | Primary programming language used in the repository. Automatically gets color-coded. |
topics | string[] | undefined | Array of repository topics/tags to display as badges (shows first 3, with "+X more" for extras). |
activityData | number[] | undefined | Array of 12 normalized values (0-1) representing repository activity for the graph display. |
isPrivate | boolean | false | Whether the repository is private (displays "Private" or "Public" badge). |