ComponentClient component

Calendar

A polished calendar for single, multiple and range date selection.

Installation

tsx

import { Calendar } from "@/components/ui/calendar"

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>

Prop	Type	Default	Description
`mode`	`"single" \| "multiple" \| "range"`	`—`	Controls the calendar selection model.
`showOutsideDays`	`boolean`	`true`	Shows dates from adjacent months.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.
`disabled`	`boolean`	`false`	Prevents user interaction when supported.