# Calendar animation (/docs/components/calendar)



{/* Generated from lib/coverage.json by scripts/gen-components.mjs. Edit the data, then run the script. */}


## What moves [#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 [#install]

Calendar is shadcn's own component. With `<Cuts />` in your root layout ([Quick start](/docs/installation)), there's nothing else to add:

```bash
npx shadcn add calendar
```

## Turn it off [#turn-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.