## Snap Carousel (S—108)

A native scroll-snap card carousel with arrow buttons and pager dots that stretch toward the active card.

- URL: https://sundaeui.dev/components/snap-carousel
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/snap-carousel.json`
- Tags: pager, swipe, scroll-snap, carousel, slider, cards

Built on CSS scroll-snap, so swiping on touch and trackpads feels native and momentum works. The active dot stretches into a pill and tracks scroll position live.
Arrows scroll one card at a time and disable at the ends. Cards peek at the edge so people know there is more.

### Usage

```tsx
import { SnapCarousel } from '@/components/sundae/snap-carousel'

<SnapCarousel />
```

### Props

- `items` (`{ id: string; title: string; body: string; tag?: string }[]`, required): Cards.
- `cardWidth` (`number`, default `240`): Card width in px.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Feature tours, testimonials, product cards on mobile.

### When not to use

- Content everyone must see: carousels hide most of it.

### Accessibility

- A region with aria-roledescription="carousel"; each card is a group labelled "n of total".
- Dots are buttons that scroll to their card; arrows have names and disabled states.
- Reduced motion removes the movement and keeps every state change.