Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Date Picker with Natural Language
A React date picker with natural language quick select shortcuts like Today, Tomorrow, and In a week for faster common date selection
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Ever watched users try to click through a calendar to find tomorrow's date? Seems silly, right? This React date picker adds natural language shortcuts alongside the calendar using shadcn/ui and ScrollArea. Built with Radix UI and date-fns, one click on Today or In a week beats navigating calendars—perfect for task deadlines, reminder scheduling, follow-up dates, and any interface where users frequently pick relative dates like tomorrow or next week.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Date Range Picker
Two-month calendar for selecting date ranges
Appointment Picker
Calendar with available time slot selection
Month and Year Selector
Dropdown selectors for quick month/year navigation
Date and Time Picker
Combined calendar and time input selection
Disabled Dates
Calendar with specific dates unavailable
Custom Styled Calendar
Calendar with custom day styling
Questions you might have
React Date Picker with Date and Time
A React date and time picker combining calendar selection with an HTML5 time input field for precise datetime scheduling in a unified interface
React Date Picker with Disabled Dates
A React date picker with disabled dates including weekends, specific date ranges, and individual unavailable days for business scheduling