Components
Curated UI collection
Date Picker UI Components
Date picker UI components provide interactive interfaces for selecting dates in web applications. Our collection includes 56 date picker components built for React, ranging from simple calendar-based selectors to advanced range pickers with custom formatting options. Whether you need a basic date input or a sophisticated date selection system, these components offer various styling approaches and integration patterns to fit different project requirements.
Day Picker
by 0xUrvish
Universal Date Picker
by Ruixen UI
Date Wheel Picker
by johuniq![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991401753.png)
Calendar [React Day Picker]
by Origin UI
Input
by Origin UI
Input
by Origin UI
Date Picker
by Kavi Katiyar
Date Picker
by Shailendra
Date Wheel Picker
by Osiris Balonga
Apple Calendar Picker
by Muhammad Asif![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/w/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Calendar picker in a drawer
by shadcn![Date Picker [react-aria-components] — date picker ui component for React & Tailwind by James Shopland](https://cdn.21st.dev/user_jolbol1/date-picker/1045/preview.png)
Date Picker [react-aria-components]
by James Shopland![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991444744.png)
Calendar [React Day Picker]
by Origin UI
Calendar language date picker
by shadcn
Calendar input
by shadcn
Calendar Date Picker
by shadcn
Datetime Picker
by Yerfa Belkacem
DatePicker
by Hero Ui![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991576300.png)
Calendar [React Day Picker]
by Origin UI
Input
by Origin UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/three-months-calendar/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Calendar
by coss
Date picker
by shadcn
HeroUI Calendar
by Hero Ui![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/two-months-calendar/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991677442.png)
Calendar [React Day Picker]
by Origin UI
DatePicker
by Hero Ui
Datetime Picker
by OpenStatus![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991629350.png)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991942757.png)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/with-time-input/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
DatePicker
by Hero Ui![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/appointment-picker/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Calendar With Presets
by Ruixen UI
DatePicker
by Hero Ui
DatePicker
by Hero Ui
Dropdown Range Date Picker
by Ruixen UI
DatePicker
by Hero Ui
Time Picker
by Ruixen UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991888250.png)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991782118.png)
Calendar [React Day Picker]
by Origin UI
Calendar day picker
by shadcn![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/calendar-with-presets/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/custom-select-day-style/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991842510.png)
Calendar [React Day Picker]
by Origin UI
HeroUI Calendar
by Hero Ui
Calendar
by coss![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/range-calendar-with-presets/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI![Date Range Picker [react-aria-components] — date picker ui component for React & Tailwind by James Shopland](https://cdn.21st.dev/user_jolbol1/date-range-picker/default/preview.png)
Date Range Picker [react-aria-components]
by James Shopland
HeroUI Calendar
by Hero Ui![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991510476.png)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/weekly-numbers/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991983843.png)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date picker ui component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991729807.png)
Calendar [React Day Picker]
by Origin UI
DatePicker
by Hero Ui
HeroUI Calendar
by Hero Ui
HeroUI Calendar
by Hero Ui
Scheduler
by Ruixen UI
HeroUI Calendar
by Hero Ui
Frequently asked questions
How many date picker UI components are available?
There are 56 date picker UI components in this collection, offering a wide range of options for different use cases and design preferences.
What types of date pickers are included?
The collection includes various date picker types such as calendar-based selectors, range pickers, and custom date input components designed for React applications.
Can I find both open-source and commercial date picker components?
Yes, the collection includes both open-source and commercial date picker UI components to suit different project needs and budgets.