Carousel animation
The arrows dip and nudge while pressed; the slides keep Embla's own motion.
with <Cuts />
1
2
3
4
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
Carousel is shadcn's own component. With <Cuts /> in your root layout (Quick start), there's nothing else to add:
npx shadcn add carouselTurn 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.