Pickers
Date picker
The date picker is the calendar wrapped in an input-like trigger, for forms where a standing month grid would cost too much vertical space. The trigger keeps a hairline boundary and a chevron all the way around, because a closed field has to look clickable while it is still empty. Choosing a day closes the popover immediately; there is no confirm step to forget.
npx shadcn@latest add @minflow/date-pickerWhere to use it
- Form rows and property panels: due dates, start dates, expiry.
- Filter bars, where the field sits in a line with other controls.
- Never where the user has to compare candidate dates before choosing; show the calendar itself.
Variations
Empty with a placeholder
The default. The field reads as a prompt until a date is set, and the boundary keeps it visible while it is still blank.
With a value
When a sensible default exists, such as a week out or the end of the current cycle. Opening the popover lands on that value's month.
In a labelled row
In a settings or property panel, where the label carries the meaning and the field can be narrowed to fit the column.