ns-ui / loud
Calendar heatmap read as a tide table — one column per week, depth carried by a single-hue ramp mixed from the accent token, with arrow-key navigation.
Use when A dense per-day (or per-slot) magnitude grid — contribution calendars, uptime, volume per weekday — where the shape of the whole period matters more than any single value. Reach for histogram-live-grain when the question is the distribution of a sample rather than its position in time.
Install
npx shadcn add https://design.helpmarq.comns-ui / heatmap-calendar-tide
One hue, five depths, mixed from the accent token into the background — so the ramp is re-stepped by the theme rather than flipped. Hover or arrow through the grid; the caption is the only readout.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | TideCell[] | — | — |
| weeks? | number | 26 | — |
| cell? | number | 13 | px edge of one day cell |
| gap? | number | 3 | — |
| label? | string | "Daily readings" | — |
| onSelect? | (cell: TideCell) => void | — | — |
| className? | string | — | — |