Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Date Picker as Appointment Picker
A React appointment booking date picker combining calendar navigation with available time slot selection in a split-panel interface
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Scheduling doctor appointments, salon bookings, or consultation calls—users need to pick both date AND time. This React appointment picker combines shadcn/ui's Calendar with a scrollable time slot list using ScrollArea. Built with Radix UI and date-fns, the split-panel layout shows available times alongside the calendar, letting users book in two clicks instead of navigating multiple screens—perfect for appointment scheduling, event registration, and service bookings.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Date and Time Picker
Combined date picker with time input field
Date Range Picker
Calendar for selecting start and end dates
Natural Language Shortcuts
Quick select buttons for common date choices
Disabled Dates
Calendar with unavailable dates blocked out
Month and Year Selector
Quick navigation with dropdown selectors
Custom Styled Calendar
Calendar with custom day appearance and states
Questions you might have
React Date Picker with Month and Year Selector
A React date picker with dropdown month and year selectors for quick navigation to any date without clicking through months sequentially
React Date Picker with Date and Time
A React date and time picker combining calendar selection with an HTML5 time input field for precise datetime scheduling in a unified interface