Calendar animation
The selected day glides to the day you click, and a new month slides in from the side you went toward.
with <Cuts />
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| You pick another day | The selection glides to it | 200–320 ms | Automatic |
| Next or previous month | The new month slides in from that side | 260 ms | Automatic |
| Its arrow buttons | Dip and nudge toward where they go | 150 ms | Automatic |
Moving through days or months with the keyboard stays instant.
Install
Calendar is shadcn's own component. With <Cuts /> in your root layout (Quick start), there's nothing else to add:
npx shadcn add calendarTurn it off
Put data-cut="none" on a calendar (or anything around it) to keep shadcn's own motion there. <Cuts responses="none" /> turns off every response across the app and keeps the cuts. With reduced motion, movement becomes a short fade or nothing.