---
name: "@heatmap"
slug: "heatmap"
description: "Beautiful, accessible heatmap components for React: GitHub-style calendar, weekday x hour matrix, date x hour, and status timeline. Built with shadcn/ui conventions."
category: "Charts/data viz"
tags: ["accessibility", "cards", "charts", "maps", "pro-available"]
framework: "react"
license: null
author: null
website: "https://shadcn-heatmap.pages.dev"
github: null
registry: "https://shadcn-heatmap.pages.dev/registry.json"
pro: true
pro_url: "https://shadcn-heatmap.pages.dev/pricing"
github_stars: null
component_count: 4
generated_at: "2026-07-28T08:00:50.948Z"
---

# @heatmap

Beautiful, accessible heatmap components for React: GitHub-style calendar, weekday x hour matrix, date x hour, and status timeline. Built with shadcn/ui conventions.

## Links

- Website: https://shadcn-heatmap.pages.dev
- Registry JSON: https://shadcn-heatmap.pages.dev/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/heatmap
- This file: https://sh4dcn.vercel.app/md/heatmap.md
- Pro / pricing: https://shadcn-heatmap.pages.dev/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://shadcn-heatmap.pages.dev/registry.json
pnpm dlx shadcn@latest add https://shadcn-heatmap.pages.dev/registry.json
bunx shadcn@latest add https://shadcn-heatmap.pages.dev/registry.json
# fetch the raw registry index
curl -s https://shadcn-heatmap.pages.dev/registry.json
```

## Components (4)

| name | type | description | install |
| --- | --- | --- | --- |
| calendar-heatmap | registry:component | GitHub-style yearly contribution heatmap with multi-year, weekStart, and i18n support. | `npx shadcn@latest add https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json` |
| weekday-heatmap | registry:component | Weekday × hour-of-day matrix with Sum row/column and independent colour scales. | `npx shadcn@latest add https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json` |
| date-heatmap | registry:component | Date × hour matrix for zooming into a narrow time window with daily Sum column. | `npx shadcn@latest add https://shadcn-heatmap.pages.dev/r/date-heatmap.json` |
| status-heatmap | registry:component | Timeline status indicator showing daily activity over a period (e.g. 90 days). Similar to Atlassian Statuspage. | `npx shadcn@latest add https://shadcn-heatmap.pages.dev/r/status-heatmap.json` |

## For AI agents

```text
You are adding components from @heatmap to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/heatmap.md) for the component list.
2. Fetch the machine-readable index: https://shadcn-heatmap.pages.dev/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: heatmap).
```