Activity Heatmap

Calendar activity matrix showing contribution intensity over a year with keyboard navigation.

@drift-ui/activity-heatmapRegistry JSONGitHubOpen in v0
1,259 contributions in the last year
NovDecJanFebMarAprMayJunJulAugSepOct
Mon
Tue
Wed
Thu
Fri
Sat
Sun
November 1 – October 31, 2026
LessMore

Keyboard

↑↓←→
Move through the calendar grid
HomeEnd
First or last week in the row
EnterSpace
Select the focused day
Escape
Dismiss the hover or focus tooltip

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

activity-heatmap-usage.tsx
import { ActivityHeatmap } from "@/components/ui/activity-heatmap"

const DATA = [
  { date: "2026-10-30", count: 3 },
  { date: "2026-10-31", count: 7 },
]

export function ContributionGraph() {
  return (
    <ActivityHeatmap
      data={DATA}
      weekStartsOn={1}
      onDaySelect={(day) => console.log(day.date, day.count)}
    />
  )
}

ActivityHeatmap

Displays activity intensity over a year in a WAI-ARIA grid with 2D keyboard navigation and accessible cell labels.

Prop
dataRequiredActivityDayInput[]Array of daily activity objects with date (YYYY-MM-DD), count, and optional level override.
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 6Default0Starting day of the week (0 for Sunday, 1 for Monday).
startDatestringEarliest calendar date in YYYY-MM-DD. Defaults to 52 weeks before endDate.
endDatestringLatest calendar date in YYYY-MM-DD. Defaults to latest date in data or today.
selectedDatestring | nullControlled selected date in YYYY-MM-DD.
defaultSelectedDatestring | nullInitial selected date when uncontrolled.
onDaySelect(day: ActivityDay) => voidCallback invoked when a day cell is selected.
thresholdsnumber[]Four-element array of count thresholds separating intensity levels 1 through 4.
unitstringDefault"contributions"Noun describing the activity unit for screen readers and summary.
showSummarybooleanDefaulttrueWhether to display the total activity summary header.
summaryReactNode | ((total: number, start: string, end: string) => ReactNode)Custom summary content or render function.
showLegendbooleanDefaulttrueWhether to render the Less/More intensity level key.
showMonthLabelsbooleanDefaulttrueWhether to render month labels above week columns.
showWeekdayLabelsbooleanDefaulttrueWhether to render weekday labels along the left side.
levelColorsRecord<number, string>Custom CSS class overrides for intensity levels 0 through 4.
showTooltipbooleanDefaulttrueWhether to render a floating tooltip on hover and focus.
renderTooltip(day: ActivityDay) => ReactNodeCustom tooltip content render function receiving the active day.
aria-labelstringDefault"Activity heatmap"Accessible label for the grid widget.

Other props go to the div.

Basic activity calendar

Display daily activity levels over six months with a Monday week start.

530 contributions in the last year
MayJunJulAugSepOct
Mon
Tue
Wed
Thu
Fri
Sat
Sun
May 1 – October 31, 2026
LessMore

Interactive day selection

Controlled day selection revealing detailed counts and intensity level in a callout.

41 commits in the last year9 commits on October 31, 2026
Oct
Sun
Mon
Tue
Wed
Thu
Fri
Sat
October 1 – October 31, 2026
LessMore

Selected date: 2026-10-31 with 9 commits (Intensity level 4 of 4).

Custom thresholds & units

Map discrete count bands to intensity levels with custom units and summary formatting.

108 tasks completed in October
Oct
Mon
Tue
Wed
Thu
Fri
Sat
Sun
October 1 – October 31, 2026
LessMore

Custom tooltip formatting

Render a rich floating tooltip with intensity badges and activity breakdown on hover and focus.

974 contributions in the last year
MayJunJulAugSepOct
Mon
Tue
Wed
Thu
Fri
Sat
Sun
May 1 – October 31, 2026
LessMore
components/ui/activity-heatmap.tsx
CtrlK