Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Natural Language in Dialog
A calendar dialog with natural language date shortcuts for quick selection of relative dates
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Navigating calendars to select tomorrow or next week feels inefficient. This React dialog adds quick-select shortcuts with phrases like Today, In 3 days, In a week using shadcn/ui components. Built with Dialog, Calendar, ScrollArea, and Button shortcuts, users choose common relative dates instantly. Perfect for task deadline setups in tools like Asana, reminder scheduling, or event planning where most selections are near-future dates benefiting from one-click shortcuts over calendar navigation.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Natural Language Calendar Inline
Shortcuts without dialog wrapper
Range Calendar Dialog
Dual-month range selection
Standard Dialog
Basic modal dialog structure
Appointment Picker Dialog
Calendar with time slot selection
Scroll Area Component
Scrollable content containers
Button Component
Action buttons