GitHub Card

Tailwind CSS

React

Preview

Enter a GitHub username to view their profile card

Try searching for popular users like "bunsdev", "torvalds"

Installation

npx dedevs-ui@latest add site-github-card

The GitHub Card is a client component that fetches a GitHub user's profile via the public GitHub API and renders a polished profile card with avatar, bio, stats, links, and a contributions heatmap-style grid.

Features:

Search input: Look up any GitHub username.
Profile info: Avatar, name/login, bio, social links, email/blog when available.
Stats: Followers, following, public repos.
Contributions grid: GitHub-like weekly activity visualization.
Share actions: Quick share to Twitter/X and LinkedIn.

Note: The component uses the public GitHub REST API and is subject to unauthenticated rate limits.

Usage

Import the component from @repo/site and render it in a client page or component:

"use client";
import React from "react";
import { GitHubCard } from "@repo/site/github-card";

export default function Page() {
  return (
    <div className="container py-10">
      <GitHubCard />
    </div>
  );
}

Props

This component does not currently accept props. It provides a search UI where users can enter a GitHub username to fetch data.

Accessibility

Keyboard: Search input supports Enter key submission.
Labels: Interactive icons include meaningful labels or context via titles/ARIA where relevant.
Contrast: Tailwind classes provide adequate contrast in light/dark modes.

Example

The live example above is sourced from apps/docs/examples/site-github-card.tsx.