Search

Search components and blocks

Sign in

Calendar Blocks

Scheduling surfaces built on existing components, ready to drop into a page.

Date Range Picker

Pro

A booking calendar — tap two days, or take a shortcut like Weekend or 2 weeks. Every preset switch reshapes the same handful of elements instead of swapping them: the two knobs glide to their new days via a shared layout animation, the connecting fill bar (placed with CSS grid-column, not pixel math) reflows on a quick spring, and its color trails a beat behind on a slower tween — so it reads as one continuous move, not four things updating at once. Hovering a day after picking check-in previews the range with a hollow ring before it's committed, and the check-in/check-out underline slides to whichever field is next.

pnpm dlx shadcn@latest add @ditherui/date-range-picker

Trip dates

6 nights

Check-in

Jan 1

Check-out

Jan 7

January 1970

S
M
T
W
T
F
S

Props

className / ...div propsReact.ComponentProps<"div">—

Suggested components