Components
Curated UI collection
shadcn Calendar React Components
The shadcn calendar component collection includes 60 React components designed for date selection and calendar interfaces. With 41 exact matches, this curated selection covers calendar implementations, date pickers, and scheduling UI patterns built on shadcn's component architecture. Browse calendar components that integrate with popular date libraries and provide flexible styling options for your React applications.
Calendar with event slots
by shadcn
Calendar
by Ali Imam
Event Calendar
by Ruixen UI
Calendar with time pressets
by shadcn
Dual Calendar
by shadcn
Heatmap Calendar
by Ruixen UI
Glass Calendar
by Ravi Katiyar
Calendar Twin
by Ruixen UI
Calendar with localisation
by shadcn
Economic Calendar
by Ravi Katiyar
Calendar with little-date
by shadcn
Monthly Heatmap Calendar
by Ruixen UI
Fullscreen Calendar
by Ahmed Mayara
Calendar Scheduler
by Ruixen UI
Range selection calendar
by shadcn
Event Scheduler
by Ruixen UI
Pill Calendar
by Ruixen UI
Calendar Variable size
by shadcn
Calendar with disabled days
by shadcn
ThreeD Wall Calendar
by Ruixen UI
Inbox Calendar
by Ruixen UI
Dialog
by Origin UI
Calendar Date Picker
by shadcn
Calendar with time piker
by shadcn
Stacked Bar Calendar
by Ruixen UI
Accordion
by Origin UI
Dialog
by Origin UI
Wheel Of Time Calendar
by Ruixen UI
Table
by Origin UI
Side Panel Multi Calendar
by Ruixen UI
Calendar with day button
by shadcn
Banner
by Serafim
Dialog
by Origin UI
Icons
by shadcn
Command
by Origin UI
Calendar picker in a drawer
by shadcn
Calendar Date & Time range
by shadcn
Mini Calendar
by Hardik Kubavat
Retro Space Shooter GitHub Calendar
by Jahirul Islam![Calendar [React Day Picker] — shadcn 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
Shadcn Accordion
by ShadcnSpace![Calendar [React Day Picker] — shadcn 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 with start end month
by shadcn
Dialog
by Origin UI
Calendar with disabled weekends
by shadcn
Calendar date and time picker
by shadcn
Day Picker
by 0xUrvish
Scheduler
by Ruixen UI
Calendar day picker
by shadcn
Dialog
by Origin UI
Dialog
by Origin UI
Dialog
by Origin UI
Dotted Dialog
by Serafim
Chart filter
by shadcn![Calendar [React-Area] — shadcn 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
Code Editor Sheet
by Bankk
Calendar with presets
by shadcn
Calendar With Month and Year Dropdown
by shadcn
Calendar language date picker
by shadcn
Table
by Origin UI
Frequently asked questions
What types of calendar components are available in shadcn?
The shadcn calendar collection includes date picker components, full calendar interfaces, scheduling views, and date range selectors. These components provide various ways to display and interact with dates in your React applications.
Can I customize shadcn calendar components?
Yes, shadcn calendar components are built with customization in mind. They use Tailwind CSS for styling and can be modified to match your design system and specific requirements.
How many calendar component variations are available?
There are 60 total calendar components and variations in this collection, with 41 exact component matches, giving you multiple options for different calendar use cases.