Heatmap
A GitHub-style calendar heatmap that shows a value per day, with month and weekday labels and a Less-to-More legend. Height derives from width and the number of weeks so cells always stay square — there is no height prop.
Daily revenue calendar
Gross volume per day, so quiet stretches and spikes are visible at a glance.
LessMore· up to $12.1K
Installation
Import from the package. Do not run shadcn add in your app.
tsx
import { Heatmap } from "@carsxe/design-system/components/heatmap"Usage
tsx
import { Heatmap } from "@carsxe/design-system/components/heatmap"
<Heatmap ariaLabel="Daily revenue" data={[{ date: "2026-08-12", value: 1240 }]} />Monday start with a count formatter
LessMore· up to 480 lookups
Custom color scale
LessMore· up to $480
API Reference
| Prop | Type | Default |
|---|---|---|
| ariaLabel | string | — |
| data | { date: string | Date; value: number }[] | — |
| description | string | — |
| startDate | string | Date | min data date |
| endDate | string | Date | max data date |
| weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 (Sunday) |
| colors | string[] | CarsXE heatmap tokens (5 levels) |
| emptyColor | string | var(--border) |
| valueFormatter | (value: number) => string | value.toLocaleString() |
| showLegend | boolean | true |
| onCellSelect | (datum: { date: Date; value: number }) => void | — |
| emptyMessage | string | "No chart data available." |