Back to Forms & Inputs
Date Picker
A trigger button that opens a month-grid calendar popover — today ringed, the selected day filled solid — for scheduling and appointment forms.
July 2026
SMTWTFS
Forms & Inputsdatecalendarpopover
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react
Overview
Layout
Trigger button + popover: month header, weekday row, day grid
Day states
Selected = filled bg-primary; today = ring-1 ring-primary
Navigation
Chevron buttons step the visible month, don't change selection
Motion
Popover fades/zooms in 100ms; day selection has no transition