Component · 8+ variants
React Calendar Component
react-day-picker engine, every variant. Single date, range, multi-month: production-ready. Pick the visual that matches your product.
Install (any variant)
npx shadcn@latest add https://better-design.com/registry/airbnb/calendar.jsonReplace airbnb with any design system slug. Every variant ships from the same registry.
Design system variants
Airbnb
Rounded cells, coral accent: host-calendar feel
Read full guide
Apple
SF Pro, soft #f5f5f7 surface, premium feel
View design system
Linear
Sharp dark, 8px radius, purple accent
View design system
Notion
Light minimal, 3px radius
View design system
Stripe
Sohne font, indigo accent
View design system
Vercel
Pure black, Geist, minimal
View design system
Supabase
Dark with green accent
View design system
Figma
Electric violet, purple glow
View design system
Why this calendar
- •react-day-picker engine: keyboard navigation, range selection, locale support, accessibility
- •Range mode out of the box: pass `mode="range"` for stay/booking flows
- •73 design-system variants: Airbnb's rounded cells, Apple's soft surfaces, Linear's sharp dark
- •Ships as shadcn-compatible registry: install with `npx shadcn@latest add`
- •Source lands in your `components/ui/calendar.tsx`: fully editable
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 navigation icons. Identical primitive to shadcn/ui: Better Design ships re-skinned variants per design system.
Does it support range selection?
Yes. Pass `mode="range"`: react-day-picker handles the range state, the variant's classes handle the visual highlight between start and end dates.
Is it free?
Yes. MIT-licensed shadcn-compatible registry. `npx shadcn@latest add`: source lands in your components/ui folder.
Which variant should I pick?
Airbnb-style if you're building a marketplace or stay-booking flow. Apple-style for premium consumer apps. Linear or Vercel for developer tools. Compare on the grid below.
Related component pages
More from Better Design