Components

GitHub activity

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

Dependencies

motion

Interaction Type

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.

Props

Options you can pass to customize this component.

Prop
Type
Description
username
string

The GitHub username you want the data for.

contributions
Contribution[]

Your own contribution data, instead of a username.

repos
RepoContribution[]

The repositories listed in the footer, highest first.

year
number

Year shown in the heading. Defaults to the year of the last contribution.

accent
stringstring[]

The color of the contribution squares.

cellSize
number

Size of each day square in pixels.

months
number

How many months of history to show.

showMonths
boolean

Adds a row of month names above the grid.

label
string

Text shown in the footer next to the avatars.

defaultOpen
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.

className
string

Extra classes for the card that wraps the grid.

Installation

npx shadcn@latest add swamimalode07/rare-ui/github-activity

How to use

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


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


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

Source Code

Click the code icon in the top-right corner to view the source code.

Keep in mind

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.

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •MIT with the Commons Clause and an attribution requirement. Free to use, modify and ship in personal and commercial projects, closed source included. You own the code once it is in your project.
  • •Credit is required. Any project shipping a Rare UI component must credit Rare UI with a visible link back to rareui.com, in a footer, an about page, a credits screen or a README.
  • •Don't strip the credit or the copyright notice from the source you copied.
  • •Don't sell, sublicense or redistribute the components themselves, on their own, bundled into a template, kit, theme or paid course, or ported to another framework.
  • •Don't republish them. No mirrors, no re-uploads, no listing them as your own work.
  • •Don't repackage the registry as a competing component library.
  • •Don't claim authorship of a component or of Rare UI itself.
  • •The LICENSE file in the repository is the full text and governs. Ask first if your use doesn't fit these rules.
GitHub activity

1863 contributions in 2025

Top contributions in: