GitHub Contributions

Visualize year-long GitHub contribution activity with daily counts, tooltips, and a profile link.

date-fns

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/github-contributions.json

Usage

usage.svelte

Features

Shows a full year of daily activity with a color legend and total count
Shows the contribution count and date in a tooltip for each day
Links the contribution total to the requested user's GitHub profile
Works with any API compatible with the GitHub Contributions API

Examples

Custom theme

Apply a warm orange palette to every contribution level.

Localized labels

Translate month, total count, and legend labels.

1368 hoạt động trong năm 2025

Ít hơn Nhiều hơn

Props

GitHubContributions

Ready-to-use contribution graph loaded from a GitHub username.

Name	Type	Default	Description
`username`	`string`	`required`	`GitHub username whose recent contributions are displayed.`
`class`	`string`	`undefined`	`Additional classes applied to the contribution graph.`

ContributionGraph

Context provider and layout root for a custom contribution graph.

Name	Type	Default	Description
`data`	`Activity[]`	`required`	`Daily activity records rendered by the graph.`
`blockMargin`	`number`	`4`	`Gap between contribution blocks in pixels.`
`blockRadius`	`number`	`2`	`Corner radius of each contribution block.`
`blockSize`	`number`	`12`	`Width and height of each contribution block.`
`fontSize`	`number`	`14`	`Base graph label size in pixels.`
`labels`	`Labels`	`undefined`	`Overrides for month, legend, and total-count labels.`
`maxLevel`	`number`	`4`	`Highest contribution intensity level.`
`totalCount`	`number`	`sum of data counts`	`Optional total that replaces the value calculated from data.`
`weekStart`	`Day`	`0`	`Day of the week used to start each graph column.`
`children`	`Snippet`	`required`	`Graph composition rendered within the shared context.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the graph root.`

ContributionGraphCalendar

Scrollable SVG calendar that exposes each activity to a render snippet.

Name	Type	Default	Description
`children`	`Snippet<[{ activity: Activity; dayIndex: number; weekIndex: number }]>`	`required`	`Renderer called for every activity block.`
`hideMonthLabels`	`boolean`	`false`	`Hides the month labels above the calendar.`
`title`	`string`	`'Contribution Graph'`	`Accessible title rendered inside the SVG.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the calendar container.`

ContributionGraphBlock

A positioned contribution rectangle using the graph context.

Name	Type	Default	Description
`activity`	`Activity`	`required`	`Activity record represented by the block.`
`dayIndex`	`number`	`required`	`Row position within the week.`
`weekIndex`	`number`	`required`	`Column position within the year.`
`ref`	`SVGRectElement \| null`	`null`	`Bindable reference to the SVG rectangle.`

ContributionGraphFooter

Footer layout for totals and the contribution legend.

Name	Type	Default	Description
`children`	`Snippet`	`required`	`Footer content.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the footer element.`

ContributionGraphLegend

Contribution intensity legend with optional custom level rendering.

Name	Type	Default	Description
`children`	`Snippet<[{ level: number }]>`	`undefined`	`Optional renderer for each legend level.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the legend element.`

ContributionGraphTotalCount

Total contribution label with an optional custom renderer.

Name	Type	Default	Description
`children`	`Snippet<[{ totalCount: number; year: number }]>`	`undefined`	`Optional renderer receiving the total count and year.`
`ref`	`HTMLDivElement \| null`	`null`	`Bindable reference to the default total-count element.`