Components
Curated UI collection
React Date Picker Components
A date picker is an essential UI component for collecting date input from users. Our collection features 60 React date picker solutions, including 50 exact matches, ranging from simple calendar interfaces to complex date range selectors. Whether you need a lightweight standalone component or a feature-rich library with multiple date selection modes, you'll find detailed information about each option's API, styling capabilities, and integration requirements.
Date Wheel Picker
by Emmanuel Osiris Balonga![Calendar [React Day Picker] — date picker react 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 react 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![Calendar [React Day Picker] — date picker react 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
Day Picker
by 0xUrvish
Fullscreen Calendar
by Ahmed Mayara
Apple Calendar Picker
by Muhammad Asif
Date Picker
by Shailendra Kumar
Emoji Picker
by liveblocks
DatePicker
by Hero Ui![Calendar [React Day Picker] — date picker react 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
Date Wheel Picker
by johuniq![Date Range Picker [react-aria-components] — date picker react 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![Calendar [React Day Picker] — date picker react 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![Date Picker [react-aria-components] — date picker react 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 react 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
Datetime Picker
by OpenStatus![Calendar [React Day Picker] — date picker react 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 react 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![Calendar [React Day Picker] — date picker react 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 react 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 react 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![Calendar [React-Area] — date picker react component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar-rac/default/preview.1737992099506.png)
Calendar [React-Area]
by Origin UI
Mini Calendar
by Hardik Kubavat![Calendar [React-Area] — date picker react component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar-rac/default/preview.1737992261935.png)
Calendar [React-Area]
by Origin UI
Date picker
by shadcn![Calendar [React Day Picker] — date picker react component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/pricing-calendar/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date picker react 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
by coss![Calendar [React Day Picker] — date picker react 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
DateTimePicker
by Ruixen
Dropdown Range Date Picker
by Ruixen![Calendar [React Day Picker] — date picker react 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
Glass Calendar
by Ravi Katiyar
Event Manager
by Vaibhav Kumar Singh
Input
by Origin UI![Calendar [React Day Picker] — date picker react 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
Universal Date Picker
by Ruixen
Date Picker
by Kavi Katiyar![Calendar [React Day Picker] — date picker react 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![Date Field [react-aria-components] — date picker react component for React & Tailwind by James Shopland](https://cdn.21st.dev/user_jolbol1/datefield/1027/preview.png)
Date Field [react-aria-components]
by James Shopland
Input
by Origin UI
Datetime Picker
by Yerfa Belkacem
Calendar With Presets
by Ruixen
Delivery Scheduler
by Ravi Katiyar
Color Picker
by Trevor McIntire
Estimated Arrival
by Batuhan Karamemiş
DateRangePicker
by Hero Ui![Calendar [React Day Picker] — date picker react 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 [React Day Picker] — date picker react 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
by coss
Emoji Picker
by liveblocks![Calendar [React Day Picker] — date picker react 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
Multi Month Calendar
by Ruixen
Meeting Scheduler
by Kavi Katiyar
Color Picker
by Trevor McIntire
DatePicker
by Hero Ui![Range Calendar [react-aria-components] — date picker react component for React & Tailwind by James Shopland](https://cdn.21st.dev/user_jolbol1/range-calendar/default/preview.png)
Range Calendar [react-aria-components]
by James Shopland![Calendar [React Day Picker] — date picker react 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
What’s in this collection
- 7 of 33 use Motion
- 20 of 33 use Lucide icons
- 6 need nothing beyond React and Tailwind
- Most common dependencies: lucide-react, date-fns, motion