HEATMAP

Grid of colored cells showing density or activity over time. Opacity scales linearly with value. Supports row and column labels.

PREVIEW

UPTIME GRID — LAST 7 DAYS

00h

06h

12h

18h

MON

TUE

WED

THU

FRI

SAT

SUN

INSTALLATION

BASH

npx shadcn@latest add @scificn/heatmap

USAGE

TSX

import { Heatmap, type HeatmapCell } from '@/ui/heatmap'

// Simple number array
const data = [0, 10, 40, 80, 100, 60, 20, 5, 90, 100, 70, 30]

<Heatmap data={data} columns={6} title="ACTIVITY" variant="GREEN" />

// With cell labels (shown as native tooltip on hover)
const labeled: HeatmapCell[] = data.map((v, i) => ({
  value: v,
  label: `Week ${i + 1}: ${v}%`,
}))

<Heatmap data={labeled} columns={6} variant="AMBER" />

VARIANTS

variant="GREEN"

variant="AMBER"

variant="RED"

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
data	HeatmapCell[] \| number[]	—	Flat array of cells, filled left-to-right, top-to-bottom.
columns	number	—	Number of columns in the grid.
variant	GREEN \| AMBER \| RED	"GREEN"	Color scale applied to cell intensity.
max	number	max(data)	Override the normalization maximum.
cellSize	number	16	Cell width and height in pixels.
rowLabels	string[]	undefined	Labels shown to the left of each row.
colLabels	string[]	undefined	Labels shown above each column.
title	string	undefined	Header label shown at the top.
className	string	—	Additional classes merged via cn().

HEATMAPCELL FIELDS

PROP	TYPE	DEFAULT	DESCRIPTION
value	number	—	Raw value. Normalized against max to compute opacity.
label	string	undefined	Tooltip text shown on hover (native browser title).