- Invoice #2041 — PDF
- billing@acme.co
- Pay invoice by Friday
Find anything instantly
Search every text, link and image you've copied. Results narrow as you type.
Search components and blocks
Scheduling surfaces built on existing components, ready to drop into a page.
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-pickerTrip dates
6 nightsCheck-in
Jan 1
Check-out
Jan 7
January 1970
className / ...div propsReact.ComponentProps<"div">—