Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Month and Year Selector
A calendar with dropdown selectors for month and year navigation, enabling quick jumps to distant dates
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Ever watch users click through months one by one to reach a birthdate 30 years ago? This React calendar adds shadcn/ui Select dropdowns for month and year, letting users jump directly to any date. Built with react-day-picker's captionLayout dropdown mode, it combines calendar navigation with dropdown convenience—perfect for birthdate pickers, historical data, or any interface needing quick date access across years.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Range Calendar
Dual-month date range selection calendar
Single Date Calendar
Basic calendar without dropdown navigation
Date Picker Input
Input field with calendar popover
Basic Select
Dropdown select component
Calendar with Footer
Calendar with action buttons below
Date Picker with Presets
Input with quick date selection