ns-ui
Date-range calendar where the selection is a tape measure: clicking anchors the hook, moving extends a mono-ticked strip across the grid with a live night count on its free end, and confirming locks it in place or Escape recoils it to zero.
Use when a date range where the duration itself is the thing being decided at the point of selection (booking a stay, sizing a sprint, bounding a report window) — the tape is an instrument with ticks and a printed 'N nights' count, not a colored region whose length you have to infer. Pick date-picker-moon instead for a single date, not a span.
Install
npx shadcn add https://design.helpmarq.comns-ui / date-range-tape
Pick your dates — the tape measures the stay as you drag, not after.
Stay dates
Select a start date
August 2026
No dates selected
Click a day to hook the tape, move toward another to extend it — the count prints on the free end. Click again (or Enter) to lock it, Escape to let it recoil back to zero.
| Prop | Type | Default | Description |
|---|---|---|---|
| label? | string | — | visible label above the grid |
| initialMonth? | Date | — | month to open on, when uncontrolled and no value is set |
| value? | SpanTapeRange | null | — | controlled confirmed range; pass null for "no selection" |
| onValueChange? | (range: SpanTapeRange | null) => void | — | fires with the locked range on confirm, or null on cancel |
| className? | string | — | — |