Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Date Picker with Custom Select Day Style
A React date picker with custom day styling using modifiers and modifiersStyles to highlight booked dates, holidays, or special occasions with colors
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Want to show which hotel dates are booked? Highlight price drops? Mark holidays in gold? This React date picker uses react-day-picker's modifiers and modifiersStyles to custom-style any dates with colors, fonts, or backgrounds. Built with shadcn/ui and Radix UI, you define modifier rules and styles—dates matching those rules get your custom appearance—perfect for booking calendars showing availability, pricing calendars with color-coded rates, and holiday planners with visually distinct special dates.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Disabled Dates
Calendar with unavailable dates blocked out
Date Range Picker
Two-month calendar for range selection
Appointment Picker
Calendar with available time slots
Multiple Day Selection
Select multiple individual dates
Natural Language Shortcuts
Quick select buttons for common dates
Month and Year Selector
Dropdown navigation for dates
Questions you might have
React Date Picker with Multiple Day Selection
A React date picker allowing multiple individual date selection for choosing non-consecutive days like recurring event dates or availability marking
React Dialog Standard
A basic modal dialog with header, content area, and footer for displaying focused information and actions