# Card Stack

A fanned stack of prints. Drag the top card to skip, or open it for specs and Add to cart.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/card-stack
```

## Usage

```tsx
import { CardStack } from '@/components/fetaui/card-stack'

export function Example() {
  return <CardStack items={prints} onAdd={addToCart} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| items | PrintItem[] | Five prints |
| index | number |  |
| defaultIndex | number | 0 |
| onIndexChange | (index) => void |  |
| state | rest, dragging, details |  |
| defaultState | rest, dragging, details | rest |
| onStateChange | (state) => void |  |
| onAdd | (item) => void |  |
| animated | boolean | true |

## When to use

- For a small collection to browse one item at a time, like prints, products or offers.

## When not to use

- For comparing items: use a grid.
- For long lists: nobody flicks past item ten.

## Accessibility

- The top print is a real button named by its title, meta and price. Prints behind it are hidden from screen readers.
- The arrows are labelled, so nothing needs dragging.
- The counter is announced politely.

## Motion

- The top print follows the pointer and tilts by x / 20. The cards below move up one step as you drag.
- Past 30% of its width or at velocity 500 it flings away in 350 ms. Otherwise it springs back.
- Details scales the print up in 350 ms.
- With reduced motion, dragging is off and the arrows swap prints in place.