Date Range Picker React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Date Range Picker is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import DateRangePicker from @/components/ui/date-range-picker.

import { useState } from "react"
import { DateRangePicker, type DateRange } from "@/components/ui/date-range-picker"

export function SalesReport() {
  const [range, setRange] = useState<DateRange>({ from: null, to: null })

  return (
    <DateRangePicker
      label="Period"
      name="period"
      locale="en-US"
      placeholder="Pick a period"
      max={new Date()}
      value={range}
      onValueChange={setRange}
      presetLabels={{ lastQuarter: "Previous quarter" }}
      labels={{ duration: (days) => (days === 1 ? "1 day" : `${days} days`) }}
    />
  )
}

Props

• labeldefault ""
  ReactNode

  Renders the field anatomy around the trigger. A string label also titles the phone sheet and names the panel. A click on the label focuses the trigger without opening it.

• descriptiondefault ""
  ReactNode

  Helper text under the field, linked with aria-describedby. The error takes its place while it shows.

• errordefault ""
  ReactNode

  Replaces the description with the animated error and marks the field invalid (red ring, aria-invalid on the trigger).

• requireddefault false
  boolean

  The mark after the label and aria-required on the trigger.

• invaliddefault false
  boolean

  The invalid look and aria-invalid without a message.

• disableddefault false
  boolean or DateMatcher or DateMatcher[] (DateMatcher: Date, Date[], { from, to }, { before }, { after }, { dayOfWeek } or (date) => boolean)

  true dims the field, blocks it and leaves the hidden inputs out of the submit. A DateMatcher instead disables those days in the calendar: a Date, a list, { from, to }, { before }, { after }, { dayOfWeek: [0, 6] } or a (date) => boolean test (booked nights, holidays).

• readOnlydefault false
  boolean

  The value stays visible and the trigger focusable, but it never opens and the clear button hides.

• sizedefault "md"
  "sm" | "md" | "lg"

  The field box: 32 / 40 / 48px (md is 44px on touch screens), like every other field.

• variantdefault "soft"
  "soft" | "outline" | "underline" | "ghost"

  The box look, shared with every field.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  The box corners, per size like the button (8 / 10 / 12px at md). Ignored by underline.

• placeholderdefault "Select dates"
  string

  The trigger text while no range is set.

• localedefault ""
  string

  Month and weekday names, digits, the first day of the week and the trigger text. Empty: the nearest LocaleProvider, else the browser.

• displayFormat
  Intl.DateTimeFormatOptions

  How the trigger and the summary write the range, through Intl formatRange: { day: "numeric", month: "short", year: "numeric" } gives "1 to 30 sept. 2026" joined by an en dash; only a start gives the start followed by a dash.

• numberOfMonthsdefault 2
  1 | 2 | 3

  Months side by side on desktop. The panel drops months that do not fit the screen; phones always show one.

• presetsdefault true
  boolean | (RangePresetKey | DateRangePreset)[]

  true: Last 7 days, Last 30 days, This month, Last month, This quarter, Last quarter, This year. Or a list mixing built-in keys ("today", "yesterday", "last90Days", "thisWeek", "lastWeek", "lastYear", "yearToDate"...) and your own { label, value: DateRange | () => DateRange }. Presets that run past min / max are cut to them; fully outside, or longer than maxDays, they are disabled.

• presetLabels
  Partial<Record<RangePresetKey, string>>

  Labels for the built-in presets (English by default).

• min
  Date

  Earlier days are disabled and the calendar stops at this month.

• max
  Date

  Later days are disabled (reports pass today) and the calendar stops at this month.

• minDaysdefault 0
  number

  The shortest range in days, both ends counted (a 2 night stay is 3 days). Closer ends are unavailable while picking.

• maxDaysdefault 0
  number

  The longest range in days, both ends counted. Further ends are unavailable while picking, longer presets are disabled.

• excludeDisableddefault true
  boolean

  A range can not span a disabled day: past the first one, the days are unavailable while picking the end (bookings).

• confirmdefault true
  boolean

  Apply / Cancel buttons; the value only changes on Apply. false commits and closes as soon as both ends are picked, or on a preset.

• clearabledefault true
  boolean

  A clear button in the field while a range is set.

• showDurationdefault true
  boolean

  The summary shows the length ("7 days", or nights with labels.nights).

• labels
  { apply?; cancel?; clear?; start?; end?; pickStart?; pickEnd?; presets?; duration?: (days) => string; nights?: (nights) => string }

  Every string of the panel: { apply: "Apply", cancel: "Cancel", clear: "Clear", start: "Start", end: "End", pickStart: "Pick a start date", pickEnd: "Pick an end date", presets: "Presets", duration: (d) => d + " days" }. nights switches the summary to nights (a 4 day stay is 3 nights).

• weekStartsOndefault -1
  0 | 1 | 2 | 3 | 4 | 5 | 6 | -1

  0 Sunday ... 6 Saturday; -1 follows the locale (Monday in ro-RO, Sunday in en-US).

• events
  CalendarEvent[]

  Dots under days in the calendar: { date, tone?, color?, label? }.

• calendarProps
  Partial<CalendarProps<"range">>

  Anything else for the calendar: size, radius, strikeDisabled, showWeekNumbers, renderDay, labels (Romanian month navigation), fixedWeeks (on by default so the panel never changes height).

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The color of the picked ends, the band, the active preset check, the outline of the cell being picked and the Apply button.

• colordefault ""
  string

  Any CSS color; replaces the tone. Text on the fill turns black or white by lightness.

• icon
  ReactNode

  The leading icon of the field (CalendarRange by default).

• defaultOpendefault false
  boolean

  Starts open while uncontrolled.

• value
  DateRange

  The committed range, controlled: { from: Date | null; to: Date | null }. A value with only from shows the start followed by a dash; a backwards one is shown in order.

• defaultValue
  DateRange

  The starting range while uncontrolled; { from: null, to: null } by default. A form reset returns to it.

• onValueChange
  (range: DateRange) => void

  Called on Apply, on a clear, or as soon as both ends are picked with confirm={false}. Never with a half-picked draft.

• open
  boolean

  The panel or sheet, controlled. Pair it with onOpenChange. Every opening starts from the committed value.

• onOpenChange
  (open: boolean) => void

  Called when the panel opens or closes.

• responsivedefault true
  boolean

  A bottom sheet below 768px instead of the popover.

• sheetTitledefault "Select dates"
  string

  The sheet title and the panel name when the label is not plain text.

• sidedefault "bottom"
  "top" | "right" | "bottom" | "left"

  Where the panel opens; it flips when there is no room.

• aligndefault "start"
  "start" | "center" | "end"

  The panel's alignment against the field.

• container
  HTMLElement | null

  Portal target for the panel and the sheet (document.body by default).

• namedefault ""
  string

  Renders hidden inputs name.from and name.to with ISO dates ("2026-09-23", local, never UTC).

• id
  string

  The trigger's id (generated by default); the label points at it.

• fieldProps
  Partial<FieldProps>

  Anything else for the field wrapper: optional, labelAction, orientation, labelWidth, hideLabel, className.

• classNames
  Partial<Record<DateRangePickerSlot, string>>

  Classes for the parts: field, label, description, error, counter, box, trigger, icon, value, clear, chevron, content, presets, preset, calendar, footer, summary, cell (the phone Start / End cells), actions. className goes on the field root (or the box without a label).

• ref
  RefObject<HTMLButtonElement | null> or (node) => void

  The trigger button; the rest of the props (onBlur, aria-*, data-*) land on it too, so react-hook-form can focus and touch it.

Parts

FAQ

Used in

More React input components