Grid chart
Activity Heatmap Chart
A calendar-style activity grid that reveals in a diagonal wave, with clear intensity levels and an intent-driven tooltip.
Every cell is an SVG square whose fill intensity maps to its value. The grid cascades in once along the diagonal, and every cell is keyboard focusable with an accessible label.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover, focus, tap or select any day to reveal its value and intensity in the tooltip.
Usage
import { ActivityHeatmapChart } from "@/registry/new-york-v4/ui/activity-heatmap-chart"
<ActivityHeatmapChart data={days} />Contribution Activity
Daily engagement across the last 18 weeks
18 weeks · 126 daysLessMore