Shadcn.io is not affiliated with official shadcn/ui
Date Picker as Appointment Picker
A React appointment booking date picker combining calendar navigation with available time slot selection in a split-panel interface
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.
Date Picker as Appointment Picker preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Paginated Data Table
A React data table with pagination controls using TanStack Table getPaginationRowModel and shadcn/ui Button for Previous/Next navigation
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