Date range picker

A range picker that grows from its trigger into two months with presets and a stretching range highlight.

$npx shadcn@latest add @silicon-ui/date-range-picker

inputsnew

Installation

$npx shadcn@latest add @silicon-ui/date-range-picker

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/date-range-picker/date-range-picker.tsx
- components/silicon-ui/lib/use-today.ts shared
- components/silicon-ui/date-range-picker/date-range-picker.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { DateRangePicker } from "@/components/silicon-ui/date-range-picker/date-range-picker";

Prop	Type	Default
`value` Controlled value. Pass `null` for no selection.	`DateRange \| null`	—
`defaultValue` Uncontrolled starting value.	`DateRange \| null`	`null`
`onChange` Called with the applied range.	`(range: DateRange) => void`	—
`label` Accessible name of the trigger and the dialog. Defaults to "Date range".	`string`	`"Date range"`
`placeholder`	`string`	`"Select dates"`
`presets`	`DateRangePreset[]`	`defaultDateRangePresets`
`minDate`	`Date`	—
`maxDate`	`Date`	—
`weekStartsOn` 0 is Sunday, 1 is Monday. Defaults to 0.	`0 \| 1` `01`	`0`
`locale`	`string`	`"en-US"`
`months` Force one or two months. `auto` picks two when the boundary is wide enough.	`"auto" \| 1 \| 2`	`"auto"`
`boundary` The element the panel should stay inside. Defaults to the viewport.	`() => HTMLElement \| null`	—
`className`	`string`	—