DocsdisplayGitHub activity

GitHub activity

A Calamansi calendar that plots a year of GitHub contributions, with a drawer of the busiest repositories.

Palette
Calamansi

0 contributions in 2026

Hover a day for its count, and open the drawer to stack the busiest repositories over the calendar.

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/github-activity

How to use

demo.tsx
import { GitHubActivity } from "@/components/ui/github-activity"
export function Demo() {
  return (
    <GitHubActivity username="fujiDevv" months={12} showMonths />
  )
}

Props

Options you can pass to customize this component.

  • usernameoptional
    string

    GitHub login to read the contribution calendar and recent pushes from. Omit it when passing your own data.

  • contributionsoptional
    Contribution[]

    Pre-fetched calendar of { date, count, level } days. Passing it skips the network entirely.

  • reposoptional
    RepoContribution[]

    Pre-fetched repository stack of { name, count, logo, href } entries.

  • yearoptional
    number

    Year shown in the heading. Defaults to the year the data ends on.

  • variantoptional
    whitecalamansislatecitrus

    Surface palette, which also picks the contribution ramp. Calamansi is the default; White mixes its ramp from the ink, so the cells follow the theme.

  • accentoptional
    stringstring[]

    Contribution ramp for levels 1 to 4. A single colour fades through opacity instead. Defaults to the ramp of the selected variant.

  • cellSizeoptional
    number

    Size of one day cell, in pixels.

  • monthsoptional
    number

    How many months of history to show once the card is wide enough for them.

  • showMonthsoptional
    boolean

    Show the month labels above the grid.

  • labeloptional
    string

    Label on the repository drawer.

  • defaultOpenoptional
    boolean

    Open the repository drawer on mount.

  • openoptional
    boolean

    Controlled drawer state, paired with onOpenChange.

  • onOpenChangeoptional
    (open: boolean) => void

    Called when the drawer opens or closes.

  • classNameoptional
    string

    Extra classes merged onto the slab.

Dependencies

motion

Credits

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Calamansi UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.
PreviousMorning widget
NextMatrix orb