Shadcn.io is not affiliated with official shadcn/ui
Calendar with Natural Language
A date range calendar with preset shortcuts for common date ranges like Last 7 Days and This Month
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.
Calendar with Natural Language preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.