Calendar
A month grid for choosing days in place. The selected day is the accent as a fill; use DatePicker when the calendar should sit behind a field.
bunx --bun shadcn@4.17.0 add @waimakers/calendar- npm dependencies
- react-day-picker@10.0.1lucide-react@1.33.0
From the registry
shadcn's canonical Calendar (React DayPicker), restyled to the brand. The selected day is the accent as a fill with an ink label; today wears the accent wash; the focus ring is --text. React DayPicker owns the WAI-ARIA date-grid and keyboard model; the one adaptation is a native day button so its ref-driven focus works with the kit's Base UI Button.
Examples
Single
Choose one day. Arrow keys move between days and Enter selects.
Retro on 23 October 2026
Range
Choose a start and an end. Two months show side by side from md up and stack on a phone.
Unavailable days
Disable days that cannot be booked so keyboard and pointer both skip them.
Month and year menus
Jump months and years with dropdowns when the date may be far away.