Components
Curated UI collection
Calendar Date Picker React Components
A calendar date picker is a UI component that allows users to select dates through an interactive calendar interface. Our collection includes 57 React calendar date picker components, ranging from simple single-date selectors to complex multi-date range pickers. Whether you need a lightweight solution or a feature-rich component with advanced date manipulation capabilities, you'll find options that integrate seamlessly with your React projects.
Day Picker
by 0xUrvish![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991983843.png)
Calendar [React Day Picker]
by Origin UI
Calendar
by coss![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/appointment-picker/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Date Wheel Picker
by johuniq![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991401753.png)
Calendar [React Day Picker]
by Origin UI
Date Wheel Picker
by Emmanuel Osiris Balonga![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991576300.png)
Calendar [React Day Picker]
by Origin UI
DatePicker
by Hero Ui
Apple Calendar Picker
by Muhammad Asif![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991444744.png)
Calendar [React Day Picker]
by Origin UI
Fullscreen Calendar
by Ahmed Mayara
Date Picker
by Shailendra Kumar
Date picker
by shadcn
Calendar
by Ali Imam![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/range-calendar-with-presets/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Datetime Picker
by Yerfa Belkacem![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991942757.png)
Calendar [React Day Picker]
by Origin UI![Date Range Picker [react-aria-components] — calendar date picker component for React & Tailwind by James Shopland](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_jolbol1/date-range-picker/default/preview.png)
Date Range Picker [react-aria-components]
by James Shopland
Calendar Date Picker
by shadcn
Glass Calendar
by Ravi Katiyar![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991729807.png)
Calendar [React Day Picker]
by Origin UI
Calendar With Presets
by Ruixen![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/two-months-calendar/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Calendar
by coss![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/with-time-input/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/pricing-calendar/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI![Date Picker [react-aria-components] — calendar date picker component for React & Tailwind by James Shopland](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_jolbol1/date-picker/1045/preview.png)
Date Picker [react-aria-components]
by James Shopland![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/w/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Calendar date and time picker
by shadcn
Calendar
by tigran tumasov
Mini Calendar
by Hardik Kubavat![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/calendar-with-presets/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Calendar with time pressets
by shadcn![Calendar [React-Area] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar-rac/default/preview.1737992099506.png)
Calendar [React-Area]
by Origin UI
Calendar
by tigran tumasov![Calendar [React-Area] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar-rac/default/preview.1737992261935.png)
Calendar [React-Area]
by Origin UI
Calendar language date picker
by shadcn
Universal Date Picker
by Ruixen
Calendar
by tigran tumasov
Calendar
by tigran tumasov![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/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] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991510476.png)
Calendar [React Day Picker]
by Origin UI
Calendar Scheduler
by Ruixen
Dropdown Range Date Picker
by Ruixen![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/three-months-calendar/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Multi Month Calendar
by Ruixen![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991677442.png)
Calendar [React Day Picker]
by Origin UI
Side Panel Multi Calendar
by Ruixen
Calendar input
by shadcn![Calendar [React Day Picker] — calendar date picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991842510.png)
Calendar [React Day Picker]
by Origin UI
Card
by Ravi Katiyar
Datetime Picker
by OpenStatus
Calendar picker in a drawer
by shadcn
Meeting Scheduler
by Kavi Katiyar
DateRangePicker
by Hero Ui
CalendarLume
by Ruixen
Calendar
by coss
Input
by Origin UI
What’s in this collection
- 7 of 36 use Motion
- 14 of 36 use Lucide icons
- 12 need nothing beyond React and Tailwind
- Most common dependencies: lucide-react, date-fns, motion