Components
Curated UI collection
React Aria Calendar Components
React Aria provides accessible calendar components built on WAI-ARIA standards for React applications. Browse 60 calendar-related components and libraries in the React Aria ecosystem, including 32 exact matches. These unstyled, headless calendar components give you full control over styling while maintaining accessibility compliance out of the box. Whether you need date pickers, month views, or range selectors, React Aria calendar components offer a solid foundation for building accessible date selection interfaces.
![Calendar [React-Area] — react aria calendar 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![Calendar [React-Area] — react aria calendar 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![Calendar [React-Area] — react aria calendar 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![Calendar [react-aria-components] — react aria calendar 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 calendar 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
Range Calendar
by Hero Ui
Range Calendar
by Hero Ui
Range Calendar
by Hero Ui
Range Calendar
by Hero Ui
Range Calendar
by Hero Ui
DatePicker
by Hero Ui
Range Calendar
by Hero Ui
Range Calendar
by Hero Ui
DatePicker
by Hero Ui
DateRangePicker
by Hero Ui
DatePicker
by Hero Ui![Date Range Picker [react-aria-components] — react aria calendar 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 calendar 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
Range Calendar
by Hero Ui
Range Calendar
by Hero Ui
DatePicker
by Hero Ui
Input
by Origin UI
DatePicker
by Hero Ui![Calendar [React Day Picker] — react aria calendar 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] — react aria calendar 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
DatePicker
by Hero Ui![Calendar [React Day Picker] — react aria calendar 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 [React Day Picker] — react aria calendar 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] — react aria calendar 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
React Aria Emoji Picker
by devongovett![Calendar [React Day Picker] — react aria calendar 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![Calendar [React Day Picker] — react aria calendar 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
DatePicker
by Hero Ui![Date Field [react-aria-components] — react aria calendar 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
Pill Calendar
by Ruixen UI![Calendar [React Day Picker] — react aria calendar 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
Input
by Origin UI![Calendar [React Day Picker] — react aria calendar 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 [React Day Picker] — react aria calendar 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] — react aria calendar 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] — react aria calendar 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
Mini Calendar
by Hardik Kubavat![Calendar [React Day Picker] — react aria calendar 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] — react aria calendar 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 calendar 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
Apple Calendar Picker
by Muhammad Asif![Calendar [React Day Picker] — react aria calendar 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] — react aria calendar 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] — react aria calendar 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 [React Day Picker] — react aria calendar 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
DateRangePicker
by Hero Ui
Calendar
by SubframeApp
Calendar With Presets
by Ruixen UI![Calendar [React Day Picker] — react aria calendar 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
DateField
by Hero Ui
Calendar
by Abraham
Fullscreen Calendar
by Ahmed Mayara
Calendar
by Abraham
DateField
by Hero Ui
DateRangePicker
by Hero Ui
Frequently asked questions
What is React Aria?
React Aria is a library of unstyled, accessible React components built on WAI-ARIA standards. It provides hooks and components for building accessible user interfaces without imposing any visual design.
Are React Aria calendar components accessible?
Yes, React Aria calendar components are built following WAI-ARIA standards and best practices for accessibility, including keyboard navigation, screen reader support, and proper ARIA attributes.
Can I style React Aria calendar components?
Yes, React Aria components are unstyled and headless, giving you complete control over styling with CSS, CSS-in-JS, or any styling solution you prefer.