Shadcn.io is not affiliated with official shadcn/ui
Date Selector
Date range selector button group with preset periods and custom option for form filtering
Date selection drives filtering—preset ranges accelerate common queries. This React component combines shadcn/ui's Button and ButtonGroup components for date range selection with stateful variant toggling between calendar-based (Today, Yesterday, This Week) and relative (Last 7 Days, Last 30 Days) period options. Built on Radix UI with variant switching between default (active) and outline (inactive) states using size="sm" for compact form controls, the pattern delivers date filter buttons with clear selection indication and Custom option. Perfect for analytics dashboards filtering reports by date, admin panels showing time-based data, logging interfaces displaying recent activity, or any form where date range should accelerate data retrieval—button groups unify period presets, variant switching communicates selection, custom option enables precise ranges.
Date Selector preview
Installation
Related Components
Timeline Controls
Time period selectors
Date Picker
Custom date selection
Priority Selector
Priority level selection
Toggle Group
Segmented toggle controls
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons
FAQ
Was this page helpful?
Sign in to leave feedback.