Components
Curated UI collection
React Calendar Components
React calendar components provide flexible date picking and scheduling functionality for modern web applications. Our collection includes 56 calendar components built for React, ranging from simple date pickers to complex scheduling interfaces. Whether you need a lightweight date selector, a full-featured calendar with event management, or a specialized scheduling component, you'll find options that integrate seamlessly with your React projects.
Fullscreen Calendar
by Ahmed Mayara
Event Manager
by Vaibhav Kumar Singh
Glass Calendar
by Ravi Katiyar
Mini Calendar
by Hardik Kubavat![Calendar [React-Area] — react calendar component 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 [React-Area] — react calendar component 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 [React Day Picker] — react calendar component 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
GitHub calendar
by Ali Imam![Calendar [React Day Picker] — react calendar component 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
Apple Calendar Picker
by Muhammad Asif
Meeting Scheduler
by Kavi Katiyar
Calendar
by Ali Imam
Day Picker
by 0xUrvish
Calendar
by ShadcnStudio
Card
by Ravi Katiyar
Calendar
by coss
Event Calendar
by Ruixen
New Calendar
by Edwin Vakayil![Calendar [React Day Picker] — react calendar component 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
Calendar with time pressets
by shadcn
Streak Calendar
by trophyso
ThreeD Wall Calendar
by Ruixen
Calendar Scheduler
by Ruixen
Date Wheel Picker
by Emmanuel Osiris Balonga
Calendar
by Abraham![Calendar [React Day Picker] — react calendar component 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
Calendar With Presets
by Ruixen
Economic Calendar
by Ravi Katiyar
Calendar
by Chetan Verma
Calendar
by ShadcnStudio![Calendar [React Day Picker] — react calendar component 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![Calendar [React Day Picker] — react calendar component 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
Calendar with event slots
by shadcn![Calendar [React Day Picker] — react calendar component 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 [React Day Picker] — react calendar component 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 Planner
by Ruixen![Calendar [React Day Picker] — react calendar component 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![Calendar [react-aria-components] — react calendar component 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/calendar/985/preview.png)
Calendar [react-aria-components]
by James Shopland
Calendar
by ShadcnStudio![Calendar [React Day Picker] — react calendar component 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
Event Calendar
by Arihant jain![Calendar [React Day Picker] — react calendar component 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![Range Calendar [react-aria-components] — react calendar component 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/range-calendar/default/preview.png)
Range Calendar [react-aria-components]
by James Shopland![Calendar [React Day Picker] — react calendar component 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
by Abraham
Heatmap Calendar
by Ruixen
Calendar
by Abraham
Event Scheduler
by Ruixen
DatePicker
by Hero Ui
Pill Calendar
by Ruixen![Calendar [React-Area] — react calendar component 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.1737992048466.png)
Calendar [React-Area]
by Origin UI![Calendar [React Day Picker] — react calendar component 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
Inbox Calendar
by Ruixen
Wheel Of Time Calendar
by Ruixen![Calendar [React Day Picker] — react calendar component 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
Calender
by Preet Suthar
Side Panel Multi Calendar
by Ruixen
Monthly Heatmap Calendar
by Ruixen
Timeline
by Preet Suthar
What’s in this collection
- 10 of 40 use Motion
- 3 of 40 use Radix
- 26 of 40 use Lucide icons
- 6 need nothing beyond React and Tailwind
- Most common dependencies: lucide-react, date-fns, motion