Activity heatmap

See a year of activity at a glance, one square per day.

$npx shadcn@latest add @silicon-ui/activity-heatmap

datachartcalendar

Installation

$npx shadcn@latest add @silicon-ui/activity-heatmap

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/activity-heatmap/activity-heatmap.tsx
- components/silicon-ui/activity-heatmap/activity-heatmap.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ActivityHeatmap } from "@/components/silicon-ui/activity-heatmap/activity-heatmap";

Prop	Type	Default
`days*` One entry per day, oldest first. Days missing inside the range count as zero.	`ActivityDay[]`	—
`label*` Accessible name for the grid, such as "Contributions in 2025".	`string`	—
`period*` Finishes the summary line: "1,284 contributions in {period}".	`string`	—
`unit` Nouns for the count.	`{ one: string; other: string }`	`CONTRIBUTIONS`
`thresholds` Upper bounds for levels one to three; anything above the last is level four. Defaults to quarters of the busiest day.	`[number, number, number]`	—
`weekStartsOn`	`0 \| 1` `01`	`0`
`selectedDate`	`string \| null`	`null`
`onSelectDate`	`(date: string) => void`	—
`actions` Controls beside the summary, such as a range switch.	`ReactNode`	—
`locale` Formatting locale. Fixed by default so server and client render the same labels.	`string`	`"en-US"`
`className`	`string`	—