A range picker where you drag across days or click a start and an end, with a live preview band that wraps across weeks and a preset column. A running total of days or nights sits above the Apply button.
npx shadcn@latest add https://hyperblur.dev/r/input-date-range.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/input-date-range.tsx.
import { InputDateRange } from "@/components/hyperblur/input-date-range"
<InputDateRange onApply={({ start, end }) => load(start, end)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | { start: string | null; end: string | null } | Controlled range with YYYY-MM-DD dates. Pair with onChange. | |
| defaultValue | { start: string | null; end: string | null } | { start: null, end: null } | Initial range when uncontrolled. |
| onChange | (value: InputDateRangeValue) => void | Called on every change while picking. | |
| onApply | (value: InputDateRangeValue) => void | Called when Apply is pressed. Closes the popover. | |
| presets | { label: string; start: string; end: string }[] | Last 7 days, Last 30 days, This month, Last month, Quarter to date | Shortcuts in the side column. Pass an empty array to hide the column. |
| months | 1 | 2 | 2 | Months shown side by side. Two collapse to one in containers under 520px. |
| today | string | Override today as YYYY-MM-DD. Defaults to the visitor's local date. | |
| unit | "days" | "nights" | "days" | Counts inclusive days, or nights between the two dates. |
| inline | boolean | false | Shows the panel in the page instead of behind a trigger button. |
| cellSize | number | 34 | Size of each day cell in pixels. |
| accent | string | "#2f7bff" | Range band, end points and button color. |
| label | string | "Date range" | Label above the trigger button. |