Skip to content
Mox UI

GitHub activity

A contribution heatmap with a footer panel that expands over the grid to rank your top repositories.

1863 contributions in 2025

Top contributions in:

Installation

  1. 1

    Install the packages

    pnpm add motion clsx tailwind-merge
  2. 2

    Add the utility file

    lib/utils.ts
    import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}
  3. 3

    Copy and paste the code into your project

    Loading source…
  4. 4

    Update the import paths to match your project

    Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx
import GitHubActivity from "@/components/ui/github-activity"
export function Demo() {  return <GitHubActivity username="mox" />}
// or pass everything yourself<GitHubActivity  contributions={contributions}  repos={[{ name: "Zero mail", count: 412, logo: <ZeroIcon /> }]}  accent={["#0e4429", "#006d32", "#26a641", "#39d353"]}/>

Props

PropTypeDefaultDescription
usernamestringDefault: -The GitHub username you want the data for.
contributionsContribution[]Default: []Your own contribution data, instead of a username.
reposRepoContribution[]Default: []The repositories listed in the footer, highest first.
yearnumberDefault: -Year shown in the heading. Defaults to the year of the last contribution.
accentstring | string[]Default: "#39d353"The color of the contribution squares.
cellSizenumberDefault: 11Size of each day square in pixels.
monthsnumberDefault: 12How many months of history to show.
showMonthsbooleanDefault: falseAdds a row of month names above the grid.
labelstringDefault: "Top contributions in:"Text shown in the footer next to the avatars.
defaultOpenbooleanDefault: falseStarts with the repository panel open. Ignored when open is set.
openbooleanDefault: -Panel state for controlled usage. When set, the component stops managing its own state.
onOpenChange(open: boolean) => voidDefault: -Called with the next state when the chevron is clicked.
classNamestringDefault: -Extra classes for the card that wraps the grid.

Click the chevron to expand the top repositories over the grid, and again to collapse them back into the stack. Hover any cell for its count and date.

Credits and license

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Mox UI is appreciated when using a component.
  • Please don't resell the components as your own kit.
Contact Mox UI