# Date components > Handle dates effortlessly with 22 React components for date picking, input, and display, crafted with Tailwind CSS for smooth integration. 106 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/date. - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/pricing-calendar.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/date-range-picker.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/date-picker.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/range-calendar.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/yearly-select-nav.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/two-months-calendar.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/three-months-calendar.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/custom-select-day-style.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/with-button.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/multiple-day-selection.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/weekly-numbers.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/right-navigation.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/disabled-dates.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/with-today-button.md) — by Origin UI - [Calendar](https://21st.dev/@shugar/components/calendar/horizontal-layout.md) — by tigran tumasov - [Calendar](https://21st.dev/@shugar/components/calendar/presets.md) — by tigran tumasov - [Calendar \[React-Area\]](https://21st.dev/@originui/components/calendar-rac.md) — by Origin UI - [Calendar \[React-Area\]](https://21st.dev/@originui/components/calendar-rac/disabled-dates.md) — by Origin UI - [Calendar](https://21st.dev/@coss.com/components/calendar.md) — by coss - [Stacked Activity Cards](https://21st.dev/@spydiecy/components/stacked-activity-cards.md) — by Tanishq - [Date Wheel Picker](https://21st.dev/@osiris-balonga/components/date-wheel-picker.md) — by Osiris Balonga - [Date picker](https://21st.dev/@shadcn/components/date-picker.md) — by shadcn - [Calendar](https://21st.dev/@shadcn/components/calendar.md) — by shadcn - [Calendar With Presets](https://21st.dev/@ruixen.ui/components/calendar-with-presets.md) — by Ruixen UI - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1.md) — by ShadcnStudio - [Card](https://21st.dev/@ravikatiyar162/components/card-23.md) — by Ravi Katiyar - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-left-side-navigation.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-twenty-two.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-month-year-navigation.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/variable-size-calendar.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/custom-day-select-calendar.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-with-range.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-two-months.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/week-number-calendar.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/multi-days-select.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/disable-day-calendar.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-with-minimum-days-selection.md) — by ShadcnStudio - [Datetime Picker](https://21st.dev/@BelkacemYerfa/components/datetime-picker.md) — by Yerfa Belkacem - [Estimated Arrival](https://21st.dev/@hedevelope/components/estimated-arrival.md) — by Batuhan Can - [Date Wheel Picker](https://21st.dev/@johuniq/components/date-wheel-picker.md) — by johuniq - [Calendar](https://21st.dev/@chetanverma16/components/calendar.md) — by Chetan Verma - [Calendar](https://21st.dev/@anubra266/components/calendar-1.md) — by Abraham - [Calendar](https://21st.dev/@anubra266/components/calendar-1/two-months-calendar.md) — by Abraham - [Weather Widget](https://21st.dev/@fahadyaseen001/components/weather-widget/weather-widget-demo.md) — by Fahad Yaseen - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/custom-indicator.md) — by Hero Ui - [Range Calendar \[react-aria-components\]](https://21st.dev/@jolbol1/components/range-calendar.md) — by James Shopland - [DatePicker](https://21st.dev/@hero_ui/components/heroui-date-picker/disabled.md) — by Hero Ui - [Timeline](https://21st.dev/@Codehagen/components/timeline.md) — by Prism UI - [Calender](https://21st.dev/@preetsuthar17/components/calender.md) — by Preet Suthar - [Calendar \[react-aria-components\]](https://21st.dev/@jolbol1/components/calendar.md) — by James Shopland - [Clock](https://21st.dev/@designali-in/components/clock.md) — by Ali Imam - [Universal Date Picker](https://21st.dev/@ruixen.ui/components/universal-date-picker.md) — by Ruixen UI - [Calendar Twin](https://21st.dev/@ruixen.ui/components/calendar-twin.md) — by Ruixen UI - [New Calendar](https://21st.dev/@edwinvakayil/components/new-calendar.md) — by Edwin Vakayil - [Calendar with disabled days](https://21st.dev/@shadcn/components/calendar-with-disabled-days.md) — by shadcn - [Calendar with week numbers](https://21st.dev/@shadcn/components/calendar-with-week-numbers.md) — by shadcn - [Calendar Date Picker](https://21st.dev/@shadcn/components/calendar-date-picker.md) — by shadcn - [Calendar with start end month](https://21st.dev/@shadcn/components/calendar-with-start-end-month.md) — by shadcn - [Calendar Variable size](https://21st.dev/@shadcn/components/calendar-variable-size.md) — by shadcn Full component directory: https://21st.dev/llms.txt