How do I install the calendar?

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

How do month changes animate?

Months slide in the direction you navigate.

Yes. The Date Picker page wraps this calendar in a popover.

Pro

A month grid with a sliding selection highlight, directional month transitions and a today marker.

pnpm dlx shadcn@latest add @ditherui/calendar

SuMoTuWeThFrSa

PropTypeDefault

todayDate—

valueDateundefined

defaultValueDateundefined

onValueChange(date: Date) => void—

classNamestring—

Use the calendar for picking dates in a month grid. It has a sliding selection highlight, directional month transitions and a today marker.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.