Calendar
A date picker component built on react-day-picker, supporting single date, range, and multiple selection modes.
Installation
pnpm dlx stera-ui add calendarUsage
import { Calendar } from "@/components/ui/calendar"const [date, setDate] = useState<Date | undefined>(new Date())
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className="rounded-lg border"
/>Date Range
Month/Year Dropdown
Pass captionLayout="dropdown" to replace the navigation arrows with month/year select dropdowns.
With Presets
Week Numbers
API Reference
Calendar extends all props from react-day-picker.
| Prop | Type | Default |
|---|---|---|
mode | "single" | "range" | "multiple" | "single" |
selected | Date | DateRange | Date[] | — |
onSelect | (value) => void | — |
disabled | Date[] | Matcher | — |
captionLayout | "label" | "dropdown" | "label" |
showWeekNumber | boolean | false |