# Carousel animation (/docs/components/carousel)



{/* 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            |
| ------------------- | ----------------------------------------- | --------- | -------------- |
| An arrow is pressed | Dips and nudges 2 px toward its direction | 70–150 ms | Automatic      |
| The slides move     | Embla's own drag and snap                 | its own   | Its own motion |

## Install [#install]

Carousel 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 carousel
```

## Turn it off [#turn-it-off]

Put `data-cut="none"` on a carousel (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.