Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Natural Language
A date range calendar with preset shortcuts for common date ranges like Last 7 Days and This Month
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Typing date ranges is tedious. This React calendar combines range selection with preset buttons for instant date selection. Built with shadcn/ui components and react-day-picker, users click Last 7 Days or This Month for immediate ranges, or manually select custom dates. Perfect for analytics dashboards, report generators, or anywhere users frequently filter by common time periods.
Quick Select
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Range Calendar
Date range selection without presets
Date Picker with Presets
Compact input with preset shortcuts
Calendar with Footer
Action buttons below calendar
Button Group
Grouped action buttons
Calendar in Dialog
Calendar within modal dialog
Tabs Component
Tabbed content organization