# Heat Calendar

> Activity grid by week where magnitude is the strength of 1 hue, in 5 steps. Hover a cell for its count and weekday, click to pin the whole week and the footer holds its total, Escape lets go. The hover area covers the gaps between cells so the tooltip doesn't flicker when you move fast, and near the first and last column the tooltip anchors to the edge so it stays inside the grid. title, unit, weeks, maxCount, values and color are props. Light and dark via shadcn theme tokens, respects reduced motion. More dark, data-dense components at https://www.ssych.com/library?ref=21st.dev

- Author: [Savva Sicevs](https://21st.dev/@ssychui)
- Library: [ssych ui](https://21st.dev/@ssychui/library/ssicevs)
- License: mit
- Tags: Calendar, Heatmap, Activity, Chart
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@ssychui/components/heat-calendar

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ssychui/heat-calendar?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/calendar.md