Pickers
Calendar
The calendar puts a whole month in view so the user can pick by position rather than by number: the first Friday, the end of the quarter, the day after a holiday. Months slide horizontally in the direction of travel instead of repainting, which keeps a user paging through the year oriented. Today wears the accent and the chosen day fills with ink, so the two never need a legend to tell them apart.
npx shadcn@latest add @minflow/calendarWhere to use it
- Booking and scheduling surfaces, where the weekday and the neighbouring days matter as much as the date itself.
- Filter panels and sidebars with standing room for a grid.
- Never in a dense form row; use the date picker there, which folds the same grid behind a trigger.
Variations
Nothing chosen
The starting state. Today carries the accent, the grid opens on the current month, and the chevrons page through the year.
With a chosen day
Once a date is set. The day fills with ink so it reads as committed rather than hovered, and the grid opens on the month that day belongs to.
Wired to a read-out
When the chosen date has to be legible away from the grid. The calendar prints nothing outside its cells, so pair it with your own line of text.