# Carousel

A rail of tall cards. The centred card grows to 106% and shows its price.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/carousel
```

## Usage

```tsx
import { Carousel } from '@fetaui/components/carousel'

export function Example() {
  return <Carousel label="Weekend escapes" cards={cards} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | string | required |
| cards | CarouselCard[] | required |
| eyebrow, title | ReactNode |  |
| defaultSaved | string[] | [] |
| onSavedChange | (saved) => void |  |
| defaultIndex | number | 0 |
| animated | boolean | true |

## When to use

- For a short, browsable set of picks.

## When not to use

- For content people must not miss: list it.

## Accessibility

- A labelled region with slide roles, and the counter is announced.
- Saving is a toggle button with a label.

## Motion

- The focused card scales to 106% as the rail moves, written directly so nothing re-renders.
- The price row fades out while flicking and back in when it settles.
- With reduced motion, cards hold still and the arrows jump.