Date Range

A calendar popover for selecting a start and end date.

Install

npx shadcn add @clearly/date-range

Live Date Range component — see usage below.

import { DateRange } from "@/components/ui/date-range"

<DateRange />

Every Clearly component also accepts glass (subtle·medium·strong), specular and className.

Prop	Type	Default	Description
`value`	`{ from?: Date; to?: Date } \| undefined`	`—`	Selected range (controlled).
`onChange`	`(range?: { from?: Date; to?: Date }) => void`	`—`	Range change callback.
`placeholder`	`string`	`"Pick a date range"`	Trigger button placeholder text.