Airbnb · Calendar

Airbnb Calendar: React Component

Part of Better Design's React component library. The host-calendar pattern Airbnb made famous: rounded day cells, coral selection, multi-month range layout. Built on react-day-picker, ships as a shadcn-compatible registry item.

Install

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

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

Live preview

Open the full Airbnb showcase

Why this calendar

•Rounded day cells, coral selection, soft range highlight: Airbnb host-calendar visual
•react-day-picker engine: keyboard nav, range mode, locale support
•Multi-month layout out of the box for stay-booking flows
•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 StayCalendar() {
  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 for the Airbnb aesthetic.

Best use case?

Marketplace stay-booking flows, host availability calendars, any product where dates feel warm and inviting rather than transactional.

Is it free?

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

How is this different from Airbnb's actual calendar?

Inspired-by, not lifted. Better Design ships the visual signature on standard react-day-picker. Airbnb's real calendar has internal availability data, pricing layers, and host-only logic that aren't open source.

Related component pages

React Calendar Component (all variants)

/components/calendar

Airbnb-style Date Picker

/components/airbnb-date-picker

Airbnb-style Data Table

/components/airbnb-data-table