Airbnb · Date Picker

React Date Picker: Airbnb-style

Part of Better Design's React component library. The warm, rounded, range-selection date picker Airbnb's host calendar made famous: built on react-day-picker, ships as a shadcn-compatible registry item.

Install

npx shadcn@latest add https://better-design.com/registry/airbnb/date-picker.json

Lands in components/ui/date-picker.tsx. Fully editable source, no SDK lock-in.

Live preview

Open the full Airbnb showcase

Why this date picker

•Rounded day cells + range highlights: matches Airbnb's host-calendar feel
•react-day-picker engine: keyboard navigation, range selection, locale support
•Coral primary, warm light surface: full DS variants available if you want consistency across Button, Input, Card
•Drops into any shadcn/ui project unchanged: npx shadcn@latest add

Usage

import { Calendar } from "@/components/ui/calendar";
import { useState } from "react";
import type { DateRange } from "react-day-picker";

export function StayDates() {
  const [range, setRange] = useState<DateRange | undefined>();
  return (
    <Calendar
      mode="range"
      selected={range}
      onSelect={setRange}
      numberOfMonths={2}
    />
  );
}

FAQ

What's this built on?

react-day-picker for the calendar engine, lucide-react for nav icons. Identical primitive to shadcn/ui: Better Design re-skins it with the Airbnb aesthetic (rounded cells, coral accent, warm surface).

Is it free?

Yes. MIT-licensed shadcn-compatible registry item. Install with npx shadcn@latest add: the source lands in your components/ui folder.

Does it support range selection?

Yes. Pass mode="range": react-day-picker handles the range state, Better Design's classes handle the visual highlight between start and end dates.

How is this different from Airbnb's real calendar?

Inspired-by, not lifted. Better Design ships the visual signature (rounded cells, coral, warm surface) on standard react-day-picker: Airbnb's real calendar is an internal proprietary component with availability data, pricing layers, and host-only logic that aren't open source.

Related component pages

React Date Picker (all variants)

/components/date-picker

React Calendar Component (all variants)

/components/calendar

Linear-style Command Palette

/components/linear-command