Activity Graph
GitHub-style activity heatmap that visualizes daily counts as a color-intensity grid.
radix-ui
Installation
$ shadcn add @jalco/activity-graphUsage
import { ActivityGraph } from "@/components/activity-graph"<ActivityGraph data={[{ date: "2026-03-11", count: 5 }, ...]} />Examples
Custom color scale
Blue scale
API Reference
ActivityGraph
PropType
ActivityEntry
PropType
fetchGitHubContributions
PropType
Notes
- Client component. Uses "use client" for a ResizeObserver that auto-sizes blocks to fit the container. Hover tooltips use Radix Tooltip for styled popover-style date and count display.
- Auto-fit. By default the block size is computed from the container width so the graph always fits without scrolling. Pass a fixed blockSize to opt into horizontal scrolling instead.
- ISR caching. The fetch helper uses the github-contributions-api which caches upstream for 1 hour, plus ISR caching locally.
- Intensity mapping. Counts are mapped to four non-zero levels relative to the maximum count in the data. The thresholds are 25%, 50%, 75%, and 100% of the max.
- Dependencies.
radix-uifor styled hover tooltips on each cell. No charting libraries or external packages. - Attribution. The fetch helper uses the github-contributions-api by @grubersjoe.