Grid chart
Activity Heatmap Chart
A calendar-style activity grid that reveals in a diagonal wave, with intensity levels, a hover tooltip and live recent cells.
Every cell is an SVG square whose fill intensity maps to its value. The grid cascades in along the diagonal with spring scaling, the most recent column gently breathes and each cell is keyboard focusable with an accessible label.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover or focus any day to scale it up and reveal its value, week and intensity swatch 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