Component · 8+ variants
React Date Picker
react-day-picker + Radix Popover. Single date, range, multi-month. Drops into any shadcn project. Pick the variant that matches your product.
Install (any variant)
npx shadcn@latest add https://better-design.com/registry/airbnb/date-picker.jsonReplace airbnb with any design system slug. Every variant ships from the same registry.
Design system variants
Airbnb
Rounded cells, coral accent
Read full guide
Apple
SF Pro, soft surface
View design system
Linear
Sharp dark, 8px radius
View design system
Notion
Light minimal, 3px radius
View design system
Stripe
Sohne, indigo accent
View design system
Vercel
Pure black, Geist
View design system
Supabase
Dark, green accent
View design system
Figma
Electric violet
View design system
Why this date picker
- •react-day-picker + Radix Popover under the hood: keyboard nav, focus trap, click-outside-to-close
- •Range mode for booking flows, single mode for forms: same primitive, different prop
- •73 design-system variants: Airbnb's rounded warmth, Apple's premium soft, Linear's sharp dark
- •Ships as shadcn-compatible registry: `npx shadcn@latest add` and source lands in `components/ui/`
- •Composes with form libraries: react-hook-form, zod, conform: out of the box
Usage
import { DatePicker } from "@/components/ui/date-picker";
import { useState } from "react";
export function BookingDate() {
const [date, setDate] = useState<Date>();
return <DatePicker value={date} onChange={setDate} />;
}FAQ
What's this built on?
react-day-picker for the calendar engine, @radix-ui/react-popover for the dropdown. Identical primitive to shadcn/ui's date-picker.
Single date or range?
Both. Use `<DatePicker />` for single dates. For ranges, the underlying Calendar primitive supports `mode="range"`: see the Calendar component page.
Is it free?
Yes. MIT-licensed shadcn-compatible registry. `npx shadcn@latest add` and source lands in your repo.
Does it work with react-hook-form?
Yes: wrap it in a Controller or use the form-field shadcn pattern. The component accepts standard `value` + `onChange` props.
Related component pages
More from Better Design