About the shadcn/ui Calendar Component
The Calendar component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add calendar` and copy it directly into your project.
Calendar Component — Frequently Asked Questions
How do I select a date range with shadcn Calendar?
Use `mode="range"` and a `DateRange` state: `const [range, setRange] = useState<DateRange>()`. Pass `selected={range}` and `onSelect={setRange}` to `<Calendar>`.
How do I disable specific dates in shadcn Calendar?
Use the `disabled` prop with a function: `<Calendar disabled={(date) => date < new Date() || date.getDay() === 0}>`. This disables past dates and Sundays.
How do I integrate shadcn Calendar with React Hook Form?
Use a `<Controller>` wrapping the Calendar. The Form variant in the examples shows the complete pattern with date formatting using `date-fns`.