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
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 Kumar
Date Wheel Picker
by Emmanuel 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
DatePicker
by Hero Ui
DatePicker
by Hero Ui
Dropdown Range Date Picker
by Ruixen
DatePicker
by Hero Ui
Time Picker
by Ruixen![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
HeroUI Calendar
by Hero Ui
What’s in this collection
- 4 of 26 use Motion
- 12 of 26 use Lucide icons
- 9 need nothing beyond React and Tailwind
- Most common dependencies: lucide-react, react-day-picker, motion