Browse components
GitHub Activity
A contribution calendar on a squircle card whose busiest repos stack as avatars and expand into a drawer over the grid.
Credit: Calamansi UI (MIT)
Installation
npx shadcn@latest add @glint-ui/github-activityFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/github-activity.json
Usage
import { GithubActivity } from "@/components/ui/github-activity";
<GitHubActivity username="fujiDevv" />
// or drive it from your own data
<GitHubActivity contributions={days} repos={repos} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "calamansi" | "white" | "slate" | "citrus" | "calamansi" | Surface palette, with its own contribution ramp. |
| cellSize | number | 11 | Size of one day, in px. |
| months | number | 12 | Months of history to show when there is room; the grid trims to fit. |
| showMonths | boolean | false | Show month labels above the grid. |
| label | string | "Top contributions in:" | Label on the repository drawer. |
| defaultOpen | boolean | false | Open the repository drawer on mount. |
| accent | string | — | One colour (faded by opacity) or a 4-step array for levels 1-4. Defaults to the variant ramp. |
| username | string | — | GitHub login. When set, the calendar and recent pushes are fetched in the browser. |
| contributions | ReactNode | — | `{ date, count, level }[]` starting on a Sunday. Pass it to skip the network. |
| repos | ReactNode | — | `{ name, count, logo?, href? }[]` for the drawer. |
| year | number | — | Year in the heading. Defaults to the year the data ends on. |
| open | boolean | — | Controlled drawer state. |
| onOpenChange | ReactNode | — | `(open) => void`, fired when the drawer toggles. |
| className | string | — | Extra classes for the root element. |