Calendar
A month grid for picking a date or a range. Pair it with Popover for a date picker.
Usage
import { Calendar } from "@zynactra/ui/calendar"const [date, setDate] = React.useState<Date | undefined>()
<Calendar mode="single" selected={date} onSelect={setDate} />Examples
Range
Date picker
Guidelines
- Format dates for people (
12 November 2026), never ISO, in the trigger. - Disable dates that can't be picked with
disabledrather than rejecting them after. - If the date is far away (a birthday), add
captionLayout="dropdown"or use plain inputs. - Render the calendar in a client component. Avoid
new Date()in the initial state of a statically rendered page: the month at build time won't match the visitor's.
API reference
Built on React DayPicker. Every DayPicker prop works.