Shadcn Calendar: React Date and Range Selection with react-day-picker
The shadcn calendar is a react date calendar for picking a single day, multiple days, or a full date range. It wraps the react-day-picker library in Tailwind CSS styling that matches the rest of your design system, so booking flows, report filters, and scheduling screens in a Next.js app all share one consistent calendar component.
This page gathers 15 calendar examples you can copy and paste, from the basic month view to range selection, multiple months side by side, dropdown month and year navigation, disabled and booked dates, and calendars paired with time input. All examples are typed TypeScript components ready for production.
When to reach for the Shadcn Calendar
A visible calendar grid works best when the date has context: checking availability, spotting weekends, or comparing a range across weeks. Booking check-in and check-out dates, filtering analytics by a custom range, and scheduling publish dates are the typical cases where users benefit from seeing the whole month.
For dates users already know, like a birth date, typing is faster than clicking through decades of months. Use a plain input with validation there, or a date picker that combines a text field with this calendar in a popover.
Design guidelines
- Disable, do not hide: Keep unavailable dates visible but muted so users understand why a week cannot be selected.
- Show range feedback live: Highlight the in-between days while the user hovers the second date of a range, which confirms the selection before the click.
- Use two months for ranges: Side by side months reduce back and forth navigation when ranges commonly span a month boundary.
- Offer dropdown navigation for far dates: Month and year dropdowns beat repeated arrow clicks whenever users may need to travel years, not weeks.
- Respect locale conventions: Week start day, month names, and date formats should follow the user's locale, which react-day-picker supports out of the box.
What you get out of the box
- Three selection modes: Single date, multiple dates, and range selection are all built in and controlled through one mode prop.
- Full keyboard support: Arrow keys move across the grid, PageUp and PageDown switch months, and Enter selects, matching the ARIA grid pattern.
- Powerful date rules: Matchers let you disable weekends, past dates, or arbitrary booked spans with a single prop.
- Theme inheritance: Because styling is Tailwind CSS classes in your own file, the calendar picks up dark mode and brand tokens automatically.
Pairing with other components
The most common composition places the calendar inside a popover triggered by a button showing the formatted value, which is exactly the date picker pattern. For scheduling interfaces, pair a range calendar with a select for time slots or presets like last 30 days.
In analytics dashboards, the range calendar typically drives a chart and a filtered table. The date filters in our react dashboards are built from this exact calendar plus popover combination.
Underlying library support
Under the hood the component is powered by react-day-picker, a mature, accessible date library that handles the grid math, selection modes, and localization. The shadcn layer, documented in the official calendar docs, maps DayPicker's class hooks onto Tailwind CSS utilities.
Because the calendar carries no primitive dependency of its own, it slots into projects standardized on Radix UI as well as those using Base UI. Every prop that react-day-picker exposes, from locale to custom matchers, passes straight through the shadcn wrapper.