shadcn/ui Time Picker Components

Dev Design Library indexes 10 shadcn/ui time picker components from 4 open-source UI libraries, with the most coming from Shadcn Space, Spectrum UI, Watermelon UI and Intent UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Time picker components belong to the Inputs group.

time-fieldIntent UI · Reacttime-field
Datetime PickerSpectrum UI · ReactA date and time picker built on shadcn/ui with no extra dependencies.
Date Picker 01 - Data & Time PickerShadcn Space · ReactA professional appointment booking card with date and time range selection.
AvailabilityWatermelon UI · React
Date Picker 03 - Time PickerShadcn Space · ReactA professional time picker with time selection.
Time Picker 01 - Scroll ColumnsShadcn Space · ReactPopover time picker with scrollable hour, minute, and AM or PM columns
Time Picker 02 - Booking SlotsShadcn Space · ReactGrid of bookable time slots where taken slots are disabled and the chosen slot is confirmed below
Time Picker 03 - Ring TrackShadcn Space · ReactCircular ring time picker where an arc fills as you drag the knob, with the time and AM or PM toggle in the center and…
Time Picker 04 - Time RangeShadcn Space · ReactStart and end time selects with a live duration badge and validation when the end is before the start
Time Picker 06 - Across Time ZonesShadcn Space · ReactMeeting time picker that converts the chosen time across cities with day and night icons and next day badges

shadcn/ui Time Picker Components

Libraries with shadcn/ui time picker components

Related categories