Calendar
A Material-3 date grid for single, multiple and range selection.
Overview
A date grid on react-day-picker: circular day cells with the selected day
filled primary (landing with a subtle scale pop), today marked by a primary
outline ring, and nav/day buttons drawn from the kit's button variants — so
press-scale, state layers and disabled treatment match the button family. Text
uses the kit's type-* roles. Supports single, multiple and range modes,
dropdown captions, week numbers and locales.
$ npx morpha-ui add calendarExamples
Range
Range endpoints render as primary circles joined by a secondary-container
band. The first click sets the start and the second the end; clicking again once
a range is complete starts a new one. Pass resetOnSelect={false} to keep
react-day-picker's default, where further clicks extend the existing range.
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add calendar. In the meantime, since this is the base shadcn component, you can
also add it directly:
npx shadcn@latest add calendarAPI Reference
Prop
Type
Accessibility
- react-day-picker renders a labelled grid: Arrow keys move by day, Page Up/Down by month, Home/End to week edges.
- Keyboard focus in the grid draws the kit's
secondaryring. - Disabled and outside days are dimmed and excluded from selection.
- The selection scale pop is dropped under
prefers-reduced-motion.