Heat calendar and returns calendar components for React
Two calendars built for numbers rather than for scheduling. The heat calendar maps a value to a day so a year of activity reads at a glance, and the returns calendar lays monthly performance out in a grid with the year totals beside it. Both are SVG and both take your own scale.
2 components, installable with the shadcn CLI.
Heat Calendar
Weeks of activity as a single-hue grid. Hover for the date and count, drag to total a span.
View componentReturns Calendar
Monthly returns as a heat grid, with a compounded year column and live spans.
View component
Questions
- Can I set my own colour scale?
- Yes. The scale is a token driven ramp, so you can match your own palette or invert it for gains and losses.
- What data shape do they take?
- A flat list of date and value pairs. The grid, totals and empty days are worked out from that.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide