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.
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.