DateRangePicker

A date range picker for selecting a start and end date. Supports labels, error states, and colors.

Basic

Prop	Type	Default	Description
`startDate`	`Date \| null`	—	The selected start date (controlled).
`endDate`	`Date \| null`	—	The selected end date (controlled).
`onRangeChange`	`(startDate: Date \| null, endDate: Date \| null) => void`	—	Called when the selected date range changes.
`placeholder`	`string`	—	Placeholder text when no dates are selected.
`label`	`string`	—	Label displayed above the date range picker.
`error`	`string`	—	Error message displayed below the input.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for focus ring and calendar selection.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

startDate

Date | null

The selected start date (controlled).

endDate

Date | null

The selected end date (controlled).

onRangeChange

(startDate: Date | null, endDate: Date | null) => void

Called when the selected date range changes.

placeholder

string

Placeholder text when no dates are selected.

label

string

Label displayed above the date range picker.

error

string

Error message displayed below the input.

color"blue"

Accent color for focus ring and calendar selection.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}