Dashral Pro is on the wayGet 30% off at launch

Dashral

Heatmap

Activity per day as a calendar grid of weeks, like a contribution graph. Plain SVG.

$ pnpm dlx shadcn@latest add https://dashral.com/r/heatmap.json
AprMayJunJulAugSepMonWedFri0 orders on Apr 6, 20260 orders on Apr 7, 20267 orders on Apr 8, 20267 orders on Apr 9, 20263 orders on Apr 10, 20262 orders on Apr 11, 20264 orders on Apr 12, 20269 orders on Apr 13, 20265 orders on Apr 14, 20269 orders on Apr 15, 202610 orders on Apr 16, 20263 orders on Apr 17, 20260 orders on Apr 18, 20262 orders on Apr 19, 20264 orders on Apr 20, 20260 orders on Apr 21, 20260 orders on Apr 22, 20265 orders on Apr 23, 20263 orders on Apr 24, 20260 orders on Apr 25, 20262 orders on Apr 26, 202610 orders on Apr 27, 20266 orders on Apr 28, 20265 orders on Apr 29, 202611 orders on Apr 30, 202611 orders on May 1, 20261 order on May 2, 20261 order on May 3, 20269 orders on May 4, 20265 orders on May 5, 20260 orders on May 6, 20261 order on May 7, 20265 orders on May 8, 20260 orders on May 9, 20260 orders on May 10, 20264 orders on May 11, 20267 orders on May 12, 20262 orders on May 13, 20264 orders on May 14, 202611 orders on May 15, 20263 orders on May 16, 20261 order on May 17, 20268 orders on May 18, 202612 orders on May 19, 20266 orders on May 20, 20261 order on May 21, 20265 orders on May 22, 20262 orders on May 23, 20260 orders on May 24, 20260 orders on May 25, 20264 orders on May 26, 20263 orders on May 27, 20260 orders on May 28, 20262 orders on May 29, 20263 orders on May 30, 20262 orders on May 31, 20264 orders on Jun 1, 20269 orders on Jun 2, 202613 orders on Jun 3, 20267 orders on Jun 4, 20265 orders on Jun 5, 20263 orders on Jun 6, 20262 orders on Jun 7, 20261 order on Jun 8, 20261 order on Jun 9, 20265 orders on Jun 10, 20262 orders on Jun 11, 20260 orders on Jun 12, 20260 orders on Jun 13, 20262 orders on Jun 14, 20262 orders on Jun 15, 20261 order on Jun 16, 20269 orders on Jun 17, 202611 orders on Jun 18, 20266 orders on Jun 19, 20262 orders on Jun 20, 20264 orders on Jun 21, 20269 orders on Jun 22, 20263 orders on Jun 23, 20265 orders on Jun 24, 20268 orders on Jun 25, 20262 orders on Jun 26, 20260 orders on Jun 27, 20261 order on Jun 28, 20264 orders on Jun 29, 20260 orders on Jun 30, 20260 orders on Jul 1, 20267 orders on Jul 2, 20267 orders on Jul 3, 20261 order on Jul 4, 20262 orders on Jul 5, 202612 orders on Jul 6, 20269 orders on Jul 7, 20265 orders on Jul 8, 20269 orders on Jul 9, 202610 orders on Jul 10, 20261 order on Jul 11, 20260 orders on Jul 12, 20265 orders on Jul 13, 20264 orders on Jul 14, 20260 orders on Jul 15, 20260 orders on Jul 16, 20265 orders on Jul 17, 20261 order on Jul 18, 20260 orders on Jul 19, 20266 orders on Jul 20, 202610 orders on Jul 21, 20266 orders on Jul 22, 20265 orders on Jul 23, 202611 orders on Jul 24, 20263 orders on Jul 25, 20261 order on Jul 26, 20265 orders on Jul 27, 20269 orders on Jul 28, 20265 orders on Jul 29, 20260 orders on Jul 30, 20261 order on Jul 31, 20261 order on Aug 1, 20260 orders on Aug 2, 20260 orders on Aug 3, 20264 orders on Aug 4, 20267 orders on Aug 5, 20262 orders on Aug 6, 20264 orders on Aug 7, 20263 orders on Aug 8, 20263 orders on Aug 9, 20265 orders on Aug 10, 20268 orders on Aug 11, 202612 orders on Aug 12, 20266 orders on Aug 13, 20261 order on Aug 14, 20262 orders on Aug 15, 20262 orders on Aug 16, 20260 orders on Aug 17, 20260 orders on Aug 18, 20264 orders on Aug 19, 20264 orders on Aug 20, 20260 orders on Aug 21, 20261 order on Aug 22, 20263 orders on Aug 23, 20267 orders on Aug 24, 20264 orders on Aug 25, 20269 orders on Aug 26, 202613 orders on Aug 27, 20267 orders on Aug 28, 20261 order on Aug 29, 20263 orders on Aug 30, 20268 orders on Aug 31, 20260 orders on Sep 1, 20261 order on Sep 2, 20265 orders on Sep 3, 20262 orders on Sep 4, 20260 orders on Sep 5, 20260 orders on Sep 6, 20266 orders on Sep 7, 20262 orders on Sep 8, 20261 order on Sep 9, 20269 orders on Sep 10, 202611 orders on Sep 11, 20262 orders on Sep 12, 20262 orders on Sep 13, 202612 orders on Sep 14, 20269 orders on Sep 15, 20263 orders on Sep 16, 20265 orders on Sep 17, 20268 orders on Sep 18, 20261 order on Sep 19, 20260 orders on Sep 20, 20262 orders on Sep 21, 20264 orders on Sep 22, 20260 orders on Sep 23, 20260 orders on Sep 24, 20267 orders on Sep 25, 20262 orders on Sep 26, 20261 order on Sep 27, 20267 orders on Sep 28, 202612 orders on Sep 29, 20269 orders on Sep 30, 2026

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/heatmap.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/heatmap

Usage

example.tsx
import { Heatmap } from "@/components/dashral/heatmap"

<Heatmap
  data={[
    { date: "2026-10-20", value: 4 },
    { date: "2026-10-21", value: 9 },
    { date: "2026-10-22", value: 2 },
  ]}
  unit={["order", "orders"]}
/>

Examples

Activity card

Totals, the current streak and the calendar follow the metric you pick.

516 commits in the last 6 months

3-day streakBest day: 9

AprMayJunJulAugSepMonWedFri1 commit on Apr 6, 20260 commits on Apr 7, 20263 commits on Apr 8, 20262 commits on Apr 9, 20260 commits on Apr 10, 20261 commit on Apr 11, 20263 commits on Apr 12, 20266 commits on Apr 13, 20263 commits on Apr 14, 20265 commits on Apr 15, 20265 commits on Apr 16, 20260 commits on Apr 17, 20260 commits on Apr 18, 20261 commit on Apr 19, 20264 commits on Apr 20, 20261 commit on Apr 21, 20264 commits on Apr 22, 20269 commits on Apr 23, 20266 commits on Apr 24, 20260 commits on Apr 25, 20261 commit on Apr 26, 20264 commits on Apr 27, 20260 commits on Apr 28, 20260 commits on Apr 29, 20264 commits on Apr 30, 20266 commits on May 1, 20261 commit on May 2, 20261 commit on May 3, 20269 commits on May 4, 20265 commits on May 5, 20260 commits on May 6, 20261 commit on May 7, 20263 commits on May 8, 20260 commits on May 9, 20260 commits on May 10, 20265 commits on May 11, 20268 commits on May 12, 20264 commits on May 13, 20264 commits on May 14, 20267 commits on May 15, 20261 commit on May 16, 20260 commits on May 17, 20260 commits on May 18, 20264 commits on May 19, 20262 commits on May 20, 20261 commit on May 21, 20267 commits on May 22, 20263 commits on May 23, 20261 commit on May 24, 20262 commits on May 25, 20265 commits on May 26, 20263 commits on May 27, 20260 commits on May 28, 20260 commits on May 29, 20262 commits on May 30, 20261 commit on May 31, 20263 commits on Jun 1, 20267 commits on Jun 2, 20269 commits on Jun 3, 20263 commits on Jun 4, 20260 commits on Jun 5, 20261 commit on Jun 6, 20261 commit on Jun 7, 20260 commits on Jun 8, 20261 commit on Jun 9, 20267 commits on Jun 10, 20266 commits on Jun 11, 20263 commits on Jun 12, 20262 commits on Jun 13, 20262 commits on Jun 14, 20262 commits on Jun 15, 20260 commits on Jun 16, 20262 commits on Jun 17, 20263 commits on Jun 18, 20260 commits on Jun 19, 20261 commit on Jun 20, 20262 commits on Jun 21, 20267 commits on Jun 22, 20263 commits on Jun 23, 20264 commits on Jun 24, 20266 commits on Jun 25, 20261 commit on Jun 26, 20260 commits on Jun 27, 20261 commit on Jun 28, 20265 commits on Jun 29, 20262 commits on Jun 30, 20264 commits on Jul 1, 20269 commits on Jul 2, 20267 commits on Jul 3, 20260 commits on Jul 4, 20261 commit on Jul 5, 20264 commits on Jul 6, 20260 commits on Jul 7, 20260 commits on Jul 8, 20263 commits on Jul 9, 20267 commits on Jul 10, 20261 commit on Jul 11, 20261 commit on Jul 12, 20268 commits on Jul 13, 20266 commits on Jul 14, 20260 commits on Jul 15, 20260 commits on Jul 16, 20263 commits on Jul 17, 20260 commits on Jul 18, 20260 commits on Jul 19, 20264 commits on Jul 20, 20269 commits on Jul 21, 20265 commits on Jul 22, 20263 commits on Jul 23, 20266 commits on Jul 24, 20261 commit on Jul 25, 20260 commits on Jul 26, 20260 commits on Jul 27, 20264 commits on Jul 28, 20263 commits on Jul 29, 20261 commit on Jul 30, 20266 commits on Jul 31, 20263 commits on Aug 1, 20262 commits on Aug 2, 20262 commits on Aug 3, 20264 commits on Aug 4, 20263 commits on Aug 5, 20260 commits on Aug 6, 20260 commits on Aug 7, 20261 commit on Aug 8, 20262 commits on Aug 9, 20263 commits on Aug 10, 20266 commits on Aug 11, 20269 commits on Aug 12, 20264 commits on Aug 13, 20260 commits on Aug 14, 20261 commit on Aug 15, 20261 commit on Aug 16, 20260 commits on Aug 17, 20260 commits on Aug 18, 20266 commits on Aug 19, 20267 commits on Aug 20, 20264 commits on Aug 21, 20261 commit on Aug 22, 20262 commits on Aug 23, 20263 commits on Aug 24, 20260 commits on Aug 25, 20261 commit on Aug 26, 20264 commits on Aug 27, 20261 commit on Aug 28, 20260 commits on Aug 29, 20262 commits on Aug 30, 20268 commits on Aug 31, 20263 commits on Sep 1, 20263 commits on Sep 2, 20265 commits on Sep 3, 20262 commits on Sep 4, 20260 commits on Sep 5, 20260 commits on Sep 6, 20265 commits on Sep 7, 20263 commits on Sep 8, 20263 commits on Sep 9, 20268 commits on Sep 10, 20268 commits on Sep 11, 20261 commit on Sep 12, 20260 commits on Sep 13, 20264 commits on Sep 14, 20261 commit on Sep 15, 20260 commits on Sep 16, 20262 commits on Sep 17, 20267 commits on Sep 18, 20262 commits on Sep 19, 20261 commit on Sep 20, 20267 commits on Sep 21, 20267 commits on Sep 22, 20261 commit on Sep 23, 20260 commits on Sep 24, 20263 commits on Sep 25, 20261 commit on Sep 26, 20260 commits on Sep 27, 20263 commits on Sep 28, 20269 commits on Sep 29, 20266 commits on Sep 30, 2026

API reference

Heatmap

Also takes every prop of <div>(opens in a new tab).

PropTypeDefault
data{ date: "YYYY-MM-DD"; value: number }[]

Days without an entry count as 0. Required.

—
endDate"YYYY-MM-DD"

The last day shown.

latest day in data
weeksnumber

How many weeks back.

26
weekStartsOn0 | 1

Sunday or Monday at the top.

1
unitstring | [one, other]

What a value counts: "orders", or ["order", "orders"] for "1 order".

"events"
localestring

Month and day names.

LocaleProvider's
showLegendboolean

The Less → More scale.

true

Accessibility

  • role="img" with a summary: the total, the period and the busiest day. Pass aria-label to write your own.
  • Each square has a tooltip with its day and value.

Motion

  • Columns fade in from left to right when it first shows; instant with reduced motion.