Date Range Picker

Trigger chip + drop-down calendar panel. Anchor-then-confirm range selection with hover preview, Monday-first grid, ESC and click-outside to close.

Range

No preset

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/andromeda-date-range-picker

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
value	`{ start: Date, end: Date }`	-	Selected date range; controlled.
onChange	`(range: { start: Date, end: Date }) => void`	-	Called with the new range once both endpoints are chosen.
presetLabel	`string`	-	Label for the active preset shown in the trigger (for example "Last month").
defaultOpen	`boolean`	false	Whether the calendar panel starts open (uncontrolled).
staticOpen	`boolean`	false	Pins the panel open and disables the dismissers; for showcases and docs.
className	`string`	-	Additional CSS classes applied to the root element.
style	`React.CSSProperties`	-	Inline styles applied to the root element.