## Card Swap (S—044)

A fanned stack of vivid art cards; click, swipe or press an arrow and the front card tucks behind.

- URL: https://sundaeui.dev/components/card-swap
- Category: 3D & creative · Art direction: Expressive
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/card-swap.json`
- Tags: stack, animated, gallery, carousel, colorful, cards

Cards fan out with a configurable spread. Advancing sends the front card off with a flick and the rest spring forward one place.
The demo art is generated from three colours per card, so it ships with no images; pass your own backgrounds for covers or photos.

### Usage

```tsx
import { CardSwap } from '@/components/sundae/card-swap'

<CardSwap
  label="Wallpapers"
  cards={[
    { title: 'Chalk', colors: ['#e9e9e7', '#111111', '#8a8a8a'] },
    { title: 'Graphite', colors: ['#1d1d1d', '#e8e8e8', '#5c5c5c'] },
  ]}
/>
```

### Props

- `cards` (`SwapCard[]`, required): Title and three art colours per card.
- `spread` (`number`, default `16`): Offset between stacked cards, px.
- `label` (`string`, default `'Collection'`): Accessible name of the carousel.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Picking a theme, wallpaper, plan or deck where each option is visual.
- Onboarding moments that show a few highlights one at a time.

### When not to use

- Lists people need to compare side by side.
- More than about eight items.

### Accessibility

- A focusable group with aria-roledescription="carousel"; the current card is announced through a polite live region.
- Cards behind the front one are aria-hidden.
- Reduced motion replaces the flick with a fade.

### Keyboard

- → / ↓: Next card
- ← / ↑: Previous card