Components
Curated UI collection
React Aria Datepicker Components
React Aria provides a comprehensive collection of datepicker components designed for building accessible date selection interfaces. With 60 available options including 39 exact matches, developers can find pre-built datepicker solutions that integrate seamlessly with React applications. These components follow accessibility best practices and offer flexible customization for various date picking use cases, from simple single-date selection to complex calendar interfaces.
Input
by Origin UI![Date Range Picker [react-aria-components] — react aria datepicker 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![Date Picker [react-aria-components] — react aria datepicker 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
Input
by Origin UI
DatePicker
by Hero Ui
DatePicker
by Hero Ui![Date Field [react-aria-components] — react aria datepicker 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
DatePicker
by Hero Ui
DateRangePicker
by Hero Ui
DateRangePicker
by Hero Ui
DatePicker
by Hero Ui
DatePicker
by Hero Ui
DateRangePicker
by Hero Ui
DatePicker
by Hero Ui
DateRangePicker
by Hero Ui
DatePicker
by Hero Ui
DateRangePicker
by Hero Ui
DateRangePicker
by Hero Ui
DateRangePicker
by Hero Ui
DateRangePicker
by Hero Ui
Input
by Origin UI
React Aria Emoji Picker
by devongovett
DateField
by Hero Ui![Calendar [React-Area] — react aria datepicker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar-rac/default/preview.1737992048466.png)
Calendar [React-Area]
by Origin UI
DateField
by Hero Ui![Calendar [React Day Picker] — react aria datepicker 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
DateField
by Hero Ui![Calendar [react-aria-components] — react aria datepicker component for React & Tailwind by James Shopland](https://cdn.21st.dev/user_jolbol1/calendar/985/preview.png)
Calendar [react-aria-components]
by James Shopland![Range Calendar [react-aria-components] — react aria datepicker 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
DateField
by Hero Ui
DateField
by Hero Ui
DateField
by Hero Ui
DateField
by Hero Ui
DateField
by Hero Ui![Calendar [React-Area] — react aria datepicker 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
DateField
by Hero Ui![Calendar [React Day Picker] — react aria datepicker 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
DateField
by Hero Ui
DateField
by Hero Ui
DateField
by Hero Ui![Calendar [React Day Picker] — react aria datepicker 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
Date Picker
by Shailendra Kumar![Calendar [React-Area] — react aria datepicker 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] — react aria datepicker 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
Datetime Picker
by OpenStatus![Calendar [React Day Picker] — react aria datepicker 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 Picker
by Kavi Katiyar
Input
by Origin UI![Calendar [React Day Picker] — react aria datepicker 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
Dropdown Range Date Picker
by Ruixen![Calendar [React Day Picker] — react aria datepicker 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
Date Wheel Picker
by johuniq![Calendar [React Day Picker] — react aria datepicker 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
by coss![Calendar [React Day Picker] — react aria datepicker 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] — react aria datepicker 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 Day Picker] — react aria datepicker 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![Calendar [React Day Picker] — react aria datepicker 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
Universal Date Picker
by Ruixen
What’s in this collection
- 12 of 20 use Lucide icons
- 5 need nothing beyond React and Tailwind
- Most common dependencies: lucide-react, react-aria-components, date-fns