Dev Design LibraryTailwind CSS Date Picker Components
Dev Design Library indexes 97 Tailwind CSS date picker components from 33 open-source UI libraries, with the most coming from Origin UI, Watermelon UI, React Spectrum, ReUI and HeroUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Date picker components belong to the Inputs group.
Date FieldHeroUI · ReactDate input field with labels, descriptions, and validation built on React Aria DateField
Date PickerReact Spectrum · ReactDatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
Comp 41Origin UI · React- DatepickerPreline UI · JavaScript (HTML + Tailwind)
Date PickerTremor · React
Basic date selectorReUI · ReactBasic date selector
Date Position SelectorAmicro Micro Transitions · ReactThree consecutive day numbers (24th, 25th, 26th) with sliding highlight pill.
date-pickerIntent UI · Reactdate-picker
Date PickerUntitled UI React · React
Date Range PickerbeUI · ReactComposable date range picker with root, trigger, popover content, calendar, header, grid, summary, footer, clear and…
Date FieldTailGrids · ReactA React date field component that lets users input a date.
Datetime PickerSpectrum UI · ReactA date and time picker built on shadcn/ui with no extra dependencies.
Date PickerFluid Functionalism · ReactField or ghost trigger for a date, a range, or a date and a time: a calendar popover that opens on the selected day…
Date PickerPanel UI · React NativeA calendar behind a button.
Date Picker 02 - Date RangeShadcn Space · ReactA professional appointment booking card with date and time range selection.
Date Field InputOpenSourceUI · React
Day Pickeruselayouts · ReactA custom day picker component with smooth animations.
Date PickerBoardUI · ReactPopover calendar for single dates.
Date PickerTremor Blocks · React
date-fieldBaseLayer · ReactA date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is…
Date PickerShark UI · ReactInput with a built-in calendar.
Schedule ChipSona UI · React
Alphine Booking FormWatermelon UI · React
Date Range Filtersv-table · SvelteA responsive date-range picker with presets and explicit apply behavior.
Date Range PickerUI Lab · ReactPaints the range as you hover, then commits it on the second click.
Date pickerHextaUI · ReactA button that opens a calendar in a popover, or a bottom sheet on phones, for single dates and ranges.
Date PickerCojeev UI · ReactChoose one day, a range, or multiple dates from a labelled field and calendar popover.
Date SelectorSpaceUI · ReactAllows users to quickly choose single dates or time ranges using interactive timeline scrubbers and preset shortcut…
Date FieldOUI · ReactReact aria components DateField with shadcn characteristics.
Glass Date PickerOpaline · ReactGlass calendar with a gliding day bubble, and a capsule date picker.
Date PickerFibo · ReactA field that opens a calendar to pick a day, or a range with presets and Apply; a popover on desktop, a drawer on…
Date PickerReactFrame · ReactA date picker with a popover calendar: single date or range selection, month navigation, min/max and disabled dates…
Date Pickerark-cn · ReactA shadcn-style date picker component built with Ark UI primitives.
Date PickerHeroUI · ReactComposable date picker built on React Aria DatePicker with DateField and Calendar composition
Date Range PickerReact Spectrum · ReactDateRangePickers combine two DateFields and a RangeCalendar popover to allow users to enter or select a date and time…
Comp 42Origin UI · React
Date selector with popoverReUI · ReactDate selector with popover
date-range-pickerIntent UI · Reactdate-range-picker
Date PickerTailGrids · ReactA component to select a date.
Date PickerFluid Functionalism · ReactField or ghost trigger for a date, a range, or a date and a time: a calendar popover that opens on the selected day…
Week StripPanel UI · React NativeOne row of days to pick from, with marks for what is on each.
Date Picker 04 - Date of BirthShadcn Space · ReactBirthday picker with month and year dropdowns, future dates disabled, and a live age check with a minimum age message.
Date Range Picker CardOpenSourceUI · React
date-pickerBaseLayer · ReactA date picker combines one or more DateFields with a calendar popover, allowing users to enter or select a single…
Date Picker 1Watermelon UI · React
Date PickerOUI · ReactReact aria components DatePicker with shadcn characteristics.
Date Range PickerHeroUI · ReactComposable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition
Tailwind Date PickerReact Spectrum · React
Comp 487Origin UI · React
Date selector with dialogReUI · ReactDate selector with dialog
Range CalendarTailGrids · ReactA calendar component for selecting a range of dates.
Date Picker 05 - Task Due DateShadcn Space · ReactTask due date picker with Today, Tomorrow, This weekend, and Next week shortcuts, overdue and due soon states, and a…
Date Picker 10Watermelon UI · React
Range CalendarHeroUI · ReactComposable date range picker with month grid, navigation, and year picker support built on React Aria RangeCalendar
Tailwind Date Range PickerReact Spectrum · React
Comp 488Origin UI · React
Date selector with dropdown menuReUI · ReactDate selector with dropdown menu
Date Picker 06 - Multiple DatesShadcn Space · ReactTime off picker for selecting multiple dates with weekends disabled, a day allowance limit, and removable date chips.
Date Picker 11Watermelon UI · React
Vanilla Date PickerReact Spectrum · React
Comp 489Origin UI · React
Date SelectorReUI · ReactA universal date selector component with multiple period types, filter modes, and flexible display options.
Date Picker 12Watermelon UI · React
Vanilla Date Range PickerReact Spectrum · React
Comp 490Origin UI · React
Date Picker 13Watermelon UI · React
Comp 491Origin UI · React
Date Picker 2Watermelon UI · React
Comp 492Origin UI · React
Date Picker 3Watermelon UI · React
Comp 493Origin UI · React
Date Picker 4Watermelon UI · React
Comp 494Origin UI · React
Date Picker 5Watermelon UI · React
Comp 495Origin UI · React
Date Picker 6Watermelon UI · React
Comp 496Origin UI · React
Date Picker 7Watermelon UI · React
Comp 497Origin UI · React
Date Picker 8Watermelon UI · React
Comp 498Origin UI · React
Date Picker 9Watermelon UI · React
Comp 499Origin UI · React
Comp 500Origin UI · React
Comp 501Origin UI · React
Comp 502Origin UI · React
Comp 503Origin UI · React
Comp 504Origin UI · React
Comp 505Origin UI · React
Comp 506Origin UI · React
Comp 507Origin UI · React
Comp 508Origin UI · React
Comp 509Origin UI · React
Comp 510Origin UI · React
Comp 511Origin UI · React
Comp 512Origin UI · React
Datefield RacOrigin UI · React
Libraries with Tailwind CSS date picker components
Related categories
- Date Picker Components
- React Date Picker Components
- Animated Date Picker Components
- shadcn/ui Date Picker Components
- Tailwind CSS Input Components
- Tailwind CSS Text Input Components
- Tailwind CSS Select Components
- Tailwind CSS Form Field Components
- Tailwind CSS Form Components
- Tailwind CSS Textarea Components
- Tailwind CSS Checkbox Components
- Tailwind CSS Switch Components
- Tailwind CSS Slider Components
- Tailwind CSS Radio Components
- Tailwind CSS Combobox Components
- Tailwind CSS File Upload Components
- Tailwind CSS Search Input Components
- Tailwind CSS Login Form Components
- Tailwind CSS Color Picker Components
- Tailwind CSS OTP Input Components