Tailwind CSS Calendar Components

Dev Design Library indexes 171 Tailwind CSS calendar components from 37 open-source UI libraries, with the most coming from ReUI, Watermelon UI, Origin UI, Shadcn Space and OpenSourceUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Calendar components belong to the Data display group.

Showing 120 of 171, a mix from every library. Open a library to see all of its components.

• Calendarshadcn/ui · ReactMonth grid date picker (react-day-picker): pick a single day, several days or a range with a start and an end date…
• CalendardaisyUI · CSS (Tailwind)
• CalendarHeroUI · ReactComposable date picker with month grid, navigation, and year picker support built on React Aria Calendar
• CalendarReact Spectrum · ReactCalendars display a grid of days in one or more months and allow users to select a single date.
• Calendarcoss ui · ReactA date picker component with range and multi-select support.
• CalendarOrigin UI · ReactA date picker component with range and multi-select support.
• CalendarTremor · React
• Basic calendarReUI · ReactBasic calendar
• AI ScheduleKokonut UI · ReactMeeting times the assistant found, each with a strip of both calendars so you can see why it is free. Booking folds…
• calendarIntent UI · Reactcalendar
• Date PickerUntitled UI React · React
• Availability SchedulerbeUI · ReactWeekly availability editor where each day springs between available and unavailable, time ranges add and remove with…
• CalendarTailGrids · ReactA calendar component with internationalization support.
• Event CalendarSpectrum UI · Reactcomponent for the Event Calendar
• CalendarVengeance UI · React
• CalendarFluid Functionalism · ReactMonth grid on DayPicker v10 for a single day or a range: one fluid hover highlight across one or two months that…
• CalendarPanel UI · React NativeA month of days, for picking one, several, or a range.
• Calendar 01 - Standard calendarShadcn Space · ReactCalendar component
• Booking Slot CalendarOpenSourceUI · React
• MedicalBoardUI · React
• CalendarTremor Blocks · React
• CalendarShadcn Dashboard · React
• CalendarObsidianUI · React
• calendarBaseLayer · ReactA calendar displays one or more date grids and allows users to select either a single date or a contiguous range of…
• CalendarShark UI · ReactSelect a date or a range of dates.
• AvailabilityWatermelon UI · React
• Glass Calendarglasscn · ReactGlass Calendar with five variants: clear, frosted, subtle, liquid, and liquid-refract
• Date Range PickerUI Lab · ReactPaints the range as you hover, then commits it on the second click.
• CalendarHextaUI · ReactA date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.
• CalendarCojeev UI · ReactChoose one appointment day, a continuous date range, or separate days in an accessible month grid.
• CalendarMetal UI · React + SwiftUIA calendar for single dates, inclusive ranges and independent dates. Localized segmented date entry, eligibility and…
• CalendarSpaceUI · ReactDisplays an interactive month grid that lets users browse dates, select individual days, or choose date ranges for…
• CalendarOUI · ReactReact aria components Calendar with shadcn characteristics.
• CalendarD2Studio UI · ReactA date field component that allows users to enter and edit a date.
• Glass Date PickerOpaline · ReactGlass calendar with a gliding day bubble, and a capsule date picker.
• CalendarFibo · ReactA month grid for picking a day or a range, with full keyboard use; pages side by side, scrolls on phones, or fills a…
• Date Pickerark-cn · ReactA shadcn-style date picker component built with Ark UI primitives.
• Sidebar 12shadcn/ui · ReactA sidebar with a calendar.
• Date PickerHeroUI · ReactComposable date picker built on React Aria DatePicker with DateField and Calendar composition
• Range CalendarReact Spectrum · ReactRangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.
• Calendar RacOrigin UI · React
• Display week numbersReUI · ReactDisplay week numbers
• range-calendarIntent UI · Reactrange-calendar
• Heat CalendarbeUI · ReactCompose Grid, Tooltip and Legend, or omit children for the complete chart.
• Date PickerTailGrids · ReactA component to select a date.
• Nothing ScheduledSpectrum UI · ReactA day rail with a now marker where any hour opens an inline composer.
• Week StripPanel UI · React NativeOne row of days to pick from, with marks for what is on each.
• Calendar 02 - Style calendarShadcn Space · ReactCalendar component
• Daily Activity Calendar WidgetOpenSourceUI · React
• CalendarWatermelon UI · React
• Calendarglasscn · React
• Mini CalendarUI Lab · ReactMonths slide past in the direction you travel.
• Date pickerHextaUI · ReactA button that opens a calendar in a popover, or a bottom sheet on phones, for single dates and ranges.
• Event CalendarSpaceUI · ReactDisplays scheduled events across day, week, and month views, making it easy for users to create and manage appointments.
• Calendar WidgetOpaline · ReactCalendar widget showing today, what's next and a month at a glance.
• Date Range PickerHeroUI · ReactComposable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition
• Tailwind CalendarReact Spectrum · React
• Comp 41Origin UI · React
• Current month buttonReUI · ReactCurrent month button
• Returns CalendarbeUI · ReactCompose Grid and Tooltip, or omit children for the complete chart.
• Range CalendarTailGrids · ReactA calendar component for selecting a range of dates.
• Calendar 03 - Time calendarShadcn Space · ReactCalendar component
• Ios Calender WidgetOpenSourceUI · React
• Calendar 1Watermelon UI · React
• Tear Off CalendarUI Lab · ReactTear a day off to move forward, pull one back to go back.
• Range CalendarHeroUI · ReactComposable date range picker with month grid, navigation, and year picker support built on React Aria RangeCalendar
• Tailwind Range CalendarReact Spectrum · React
• Comp 42Origin UI · React
• Today buttonReUI · ReactToday button
• Calendar 04 - Dialog calendarShadcn Space · ReactCalendar component
• Minimal Agenda WidgetOpenSourceUI · React
• Calendar 10Watermelon UI · React
• Vanilla CalendarReact Spectrum · React
• Comp 487Origin UI · React
• Custom navigation with year viewReUI · ReactCustom navigation with year view
• Calendar 06 - Disable WeekendsShadcn Space · ReactCalendar component
• Month Picker CalendarOpenSourceUI · React
• Calendar 11Watermelon UI · React
• Vanilla Range CalendarReact Spectrum · React
• Comp 488Origin UI · React
• Preset time selectionReUI · ReactPreset time selection
• Calendar 07 - Variable SizeShadcn Space · ReactCalendar component
• Week Strip CalendarOpenSourceUI · React
• Calendar 12Watermelon UI · React
• Comp 489Origin UI · React
• Calendar with presetsReUI · ReactCalendar with presets
• Calendar 14 - Range SelectionShadcn Space · ReactCalendar component
• Calendar 13Watermelon UI · React
• Comp 490Origin UI · React
• Range calendar with presetsReUI · ReactRange calendar with presets
• Calendar 16 - Date Time SchedulerShadcn Space · ReactA responsive calendar component with date selection, controlled time range inputs, and duration presets.
• Calendar 14Watermelon UI · React
• Comp 491Origin UI · React
• Calendar with pricingReUI · ReactCalendar with pricing
• Calendar 15Watermelon UI · React
• Comp 492Origin UI · React
• Calendar with presetsReUI · ReactCalendar with presets
• Calendar 16Watermelon UI · React
• Comp 493Origin UI · React
• Appointment calendarReUI · ReactAppointment calendar
• Calendar 17Watermelon UI · React
• Comp 494Origin UI · React
• Range calendarReUI · ReactRange calendar
• Calendar 18Watermelon UI · React
• Comp 495Origin UI · React
• Display 2 monthsReUI · ReactDisplay 2 months
• Calendar 19Watermelon UI · React
• Comp 496Origin UI · React
• Display 2 months with range pickerReUI · ReactDisplay 2 months with range picker
• Calendar 2Watermelon UI · React
• Comp 497Origin UI · React
• Calendar with event listReUI · ReactCalendar with event list
• Calendar 20Watermelon UI · React
• Comp 498Origin UI · React
• Localize calendarReUI · ReactLocalize calendar
• Calendar 21Watermelon UI · React
• Comp 499Origin UI · React
• Calendar with date pickerReUI · ReactCalendar with date picker
• Calendar 22Watermelon UI · React
• Comp 500Origin UI · React

Libraries with Tailwind CSS calendar components

• ReUI
• Watermelon UI
• Origin UI
• Shadcn Space
• OpenSourceUI

Related categories

• Calendar Components
• React Calendar Components
• Animated Calendar Components
• shadcn/ui Calendar Components
• Tailwind CSS Data Display Components
• Tailwind CSS Card Components
• Tailwind CSS Chart Components
• Tailwind CSS Table Components
• Tailwind CSS Avatar Components
• Tailwind CSS Stat Components
• Tailwind CSS List Components
• Tailwind CSS Accordion Components
• Tailwind CSS Data Table Components
• Tailwind CSS Carousel Components
• Tailwind CSS Collapsible Components
• Tailwind CSS Avatar Group Components
• Tailwind CSS Stat Card Components
• Tailwind CSS Bar Chart Components
• Tailwind CSS Tree View Components
• Tailwind CSS Card Stack Components