React Button Group - Date Selector
Date range selector button group with preset periods and custom option for form filtering
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-1.jsonRelated patterns you will also like
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