Calendar
Accessible month grid — single or range, two-month view, disabled days, min/max, week start, Intl labels and full keyboard nav.
2 files · 213 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/calendar.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs calendarUsage
import { Calendar } from "@/components/opus/ui/calendar";
<Calendar selected={day} onSelect={setDay} />
<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />API
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "single" | Selection model. |
| selected / onSelect | Date | { from, to } | — | Value. |
| min / max / isDisabled | Date / (d) => boolean | — | Constraints. |
| weekStartsOn / locale / numberOfMonths | 0|1 / string / 1|2 | — | Presentation. |
Notes
- Keyboard: arrows move by day/week, PageUp/PageDown by month, Home/End to week edges, Enter selects.