Activity Heatmap
NEWA GitHub-style contribution calendar and weekday-by-hour activity grid with automatic column fitting, quarterly color levels, hover tooltips, and keyboard navigation.
Activity
Daily contributions
1,227 contributions in the last 11 months
Peak Mon, Dec 22, 2025 · 17
LessMore
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/activity-heatmap
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "calendar" | "hours" | "calendar" | One cell per day or a weekday-by-hour grid |
| data | HeatDay[] | — | Calendar data as { date: "YYYY-MM-DD" | Date, value: number } entries |
| matrix | number[][] | — | Hours-mode matrix with 7 rows (weekdays) and 24 columns (hours) |
| rowLabels | string[] | ["Mon", … , "Sun"] | Row names used in hours mode |
| weeks | number | 53 | Maximum number of weeks to show in calendar mode |
| endDate | string | Date | — | Last day displayed; defaults to the latest date in the data |
| weekStart | 0 | 1 | 0 | First day of the week: 0 for Sunday, 1 for Monday |
| color | string | "#34d399" | Base color mixed into the activity levels |
| unit | string | "contributions" | Plural noun used in the summary and tooltip |
| minCell | number | 11 | Smallest cell size before calendar columns are dropped |
| animated | boolean | true | Enables the staggered cell entrance animation |
| ariaLabel | string | auto-generated | Accessible description for the heatmap image role |
| className | string | "" | Additional CSS classes for the heatmap wrapper |