1Sponsor

Heat Map

Grid heatmap with color intensity scale

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/heat-map.json

Usage

import { HeatMap } from "@/components/ui/heat-map";
<HeatMap
  data={[
    [1, 4, 7, 2],
    [3, 8, 5, 1],
  ]}
  rowLabels={["Mon", "Tue"]}
  colLabels={["Q1", "Q2", "Q3", "Q4"]}
  showValues
/>

API Reference

HeatMap

PropTypeDefault
datanumber[][]required
rowLabelsstring[]undefined
colLabelsstring[]undefined
colorScalestring[]DEFAULT_COLOR_SCALE
cellWidthnumber5
showValuesbooleanfalse