# Carousel Snap Drag — React Carousel Component

> A draggable track that carries your throw's momentum to the nearest slide, with arrows, stretching dots and arrow-key control.

- Category: [Carousels](https://pixelpapa.com/components/carousels.md)
- Tags: carousel, drag, snap, momentum, keyboard
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/carousels/carousel-snap-drag

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/carousel-snap-drag
```

The file is written to `components/pixelpapa/carousel-snap-drag.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/carousels/carousel-snap-drag.

## AI prompt

```text
Add the "Carousel Snap Drag" component from PixelPapa UI to this project.

What it is: A draggable track that carries your throw's momentum to the nearest slide, with arrows, stretching dots and arrow-key control.
Category: Carousels. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/carousel-snap-drag
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/carousel-snap-drag.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/carousel-snap-drag.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/carousel-snap-drag" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More carousels

- [Carousel Coverflow 3D](https://pixelpapa.com/components/carousels/carousel-coverflow-3d.md) (Pro): Covers fan out in perspective around a centred item; swipe, click a side cover or use the arrow keys and they swing through on springs.
- [Carousel Marquee Infinite](https://pixelpapa.com/components/carousels/carousel-marquee-infinite.md): An endless row that glides in either direction and eases to a stop under the pointer instead of freezing, then eases back up to speed.
- [Carousel Progress Autoplay](https://pixelpapa.com/components/carousels/carousel-progress-autoplay.md) (Pro): Story-style slides with segmented progress bars that fill in real time; tap either side to move, press and hold to pause.
- [Carousel Stacked Fade](https://pixelpapa.com/components/carousels/carousel-stacked-fade.md): Slides sit in a receding stack; the front one drops away and fades while the next rises forward, on a timer that pauses on hover.
- [Carousel Thumbnail Gallery](https://pixelpapa.com/components/carousels/carousel-thumbnail-gallery.md) (Pro): A main stage with a thumbnail strip; slides push in from the direction you travel and a ring glides between thumbnails.
- [Carousel Vertical Ticker](https://pixelpapa.com/components/carousels/carousel-vertical-ticker.md): A live feed where each new row springs in at the top, the rest step down a slot and the oldest fades off the bottom, pausing on hover.