GitHub Activity React chart component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import GitHubActivity from @/components/ui/github-activity.

import GitHubActivity from "@/components/ui/github-activity"

export function Demo() {
  return <GitHubActivity username="octocat" />
}

// or pass everything yourself:
// <GitHubActivity
//   contributions={contributions}
//   repos={[{ name: "Zero mail", count: 412, logo: <ZeroIcon /> }]}
//   accent={["#0e4429", "#006d32", "#26a641", "#39d353"]}
// />

Props

• usernamedefault ""
  string

  A GitHub username to load the last year of contributions and the most-pushed repositories for, from public APIs. Ignored for whichever of contributions or repos you pass yourself. An unknown or invalid name shows a not found heading and calls onError.

• contributionsdefault "[]"
  Contribution[]

  Your own contribution data, one { date, count, level } per day in date order, starting on a Sunday. Level 0 to 4 picks the shade.

• reposdefault "[]"
  RepoContribution[]

  The repositories listed in the footer, highest first: { name, count, logo?, href? }. The first avatarCount (3) stack as avatars; a missing logo shows the initial.

• yeardefault 0
  number

  Overrides the year in the heading. 0 uses the year of the latest contribution (2025 in this sample).

• accentdefault "#39d353"
  string | string[]

  The color of the contribution squares. One color is faded per level; an array of four shades (or five, with the empty color first) sets each level exactly.

• cellSizedefault 11
  number

  Size of each day square in pixels. The gap scales with it.

• cellRadiusdefault 3
  number

  Corner radius of each day square in pixels.

• backgrounddefault ""
  string

  Any CSS color for the card. Empty is white in light mode and black in dark mode. The heading and the panel keep the theme colors, so pick a background that suits the theme.

• radiusdefault 28
  number

  Corner radius of the card in pixels; the repository panel inside follows it minus 10px.

• chevronColordefault ""
  string

  Any CSS color for the round chevron that opens the panel. Empty uses #C4C9CC light, #3E4346 dark. It keeps a 44px hit area on touch screens.

• avatarCountdefault 3
  number

  How many repository avatars stack in the closed footer (and, with username, how many repositories are fetched).

• monthsdefault 12
  number

  How many months of history to show, at most. The grid also drops older weeks that do not fit its width.

• showMonthsdefault false
  boolean

  Adds a row of month names above the grid.

• labeldefault "Top contributions in:"
  string

  Text shown in the footer next to the avatars.

• localedefault ""
  string

  Intl locale for the month names, the tooltip date and the heading count. Falls back to UIProvider's locale, then en-US.

• headingLabeldefault "{count} contributions"
  string

  Heading template; {count} fills in the total.

• yearLabeldefault "in {year}"
  string

  Appended to the heading when there is a year; {year} fills in.

• notFoundLabeldefault "No public activity found for {login}"
  string

  Heading when username has no public calendar; {login} fills in.

• dayLabeldefault "{count} contributions on {date}"
  string

  Tooltip template for a day; {count} and {date} fill in.

• dayLabelOnedefault "{count} contribution on {date}"
  string

  Tooltip template for a day with exactly one contribution.

• showReposLabeldefault "Show top repositories"
  string

  Accessible name of the chevron while the panel is closed.

• hideReposLabeldefault "Hide top repositories"
  string

  Accessible name of the chevron while the panel is open.

• defaultOpendefault false
  boolean

  Starts with the repository panel open. Ignored when open is set.

• open
  boolean

  Panel state for controlled usage. When set, the component stops managing its own state.

• onOpenChange
  (open: boolean) => void

  Called with the next state when the chevron is clicked.

• onError
  (username: string) => void

  Called when username is not a valid GitHub login or its calendar cannot be loaded, for example to fall back to data you pass yourself.

• className
  string

  Extra classes for the card that wraps the grid. Its width fits the visible weeks (at least 320px) and is capped at the parent width; pass max-w-* to show fewer weeks.

Parts

FAQ

Used in

More React chart and stat components