ns-ui
A GitHub-style year activity calendar where intensity is stipple density, not color — every day cell holds a handful of deterministically jittered ink dots, denser for more activity, like an engraved print. Hovering or arrow-keying through days opens a zoomed loupe with the exact count, and each new day's dots spring into the loupe with a brief ink-settle scatter, like fresh ink landing on paper.
Use when A GitHub-style contribution calendar for an audience that reads density, not hue — colorblind-safe by construction and print-legible since it never depends on a color channel. Reach for a conventional color-scale heatmap instead when the surrounding UI already commits to a color legend (e.g. matching a severity palette) that stippling can't reuse.
Install
npx shadcn add https://design.helpmarq.comns-ui / heatmap-year-stipple
Density is stippled ink, not color. Hover or arrow-key through days for the loupe and exact count.
| Prop | Type | Default | Description |
|---|---|---|---|
| values? | Record<string, number> | — | Map of ISO date ("YYYY-MM-DD") to an activity count. |
| endDate? | Date | — | Last day of the 371-day window. Defaults to today. |
| className? | string | — | — |