Spark UI
Back to UI Kit

Contribution Grid

A 20-week activity grid tinted to whatever accent colour you pick, with per-tile hover detail.

Interactive Stage Preview

Customize

8 options
Accent Color
Weeks
20
Cell Height
12
Cell Gap
6
Corner Radius
3
Activity Density
65
Month Labels
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add mono-activity-heatmap

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#39d353'Tile color for active contribution cells.
weeksnumber20Number of week columns in the grid.
cellHeightnumber12Height of each day tile in pixels.
gapnumber6Space between tiles in pixels.
radiusnumber3Rounding on each tile.
densitynumber65Share of days that have any activity.
showMonthsbooleantrueShow month headers above the grid.
speednumber100Playback speed of entry and transition animations, as a percentage.