# Page Flip

A book you leaf through, like a menu or a lookbook: spreads on Web and one page at a time on Mobile.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/page-flip
```

## Usage

```tsx
import { BookCover, BookPage, PageFlip } from '@/components/fetaui/page-flip'

export function Example() {
  return (
    <PageFlip
      label="Menu"
      cover={<BookCover kicker="Spring menu" title="Maison Céleste" />}
      pages={[<BookPage key="2" heading="Welcome" folio={2} />]}
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| cover | ReactNode | required |
| pages | ReactNode[] | required |
| page | number |  |
| defaultPage | number | 0 |
| onPageChange | (page) => void |  |
| pose | peek, turning |  |
| label | string | Book |
| animated | boolean | true |
| BookCover | kicker, title, hint |  |
| BookPage | kicker, heading, folio, folioSide |  |
| BookDish | name, price, note |  |
| BookRow | label, value |  |
| BookText | children |  |

## When to use

- For long reads that gain from feeling like an object, such as menus and brochures.
- When the content falls into short pages.

## When not to use

- For content people need to scan or search: use a normal page.
- For a set of images: use Carousel.

## Accessibility

- Pages are regions named by their folio, with real headings.
- Paging buttons are labelled and disable at each end.
- The counter announces the new page politely.
- The turning leaf is decorative and hidden from assistive tech.

## Motion

- A turn rotates the leaf 180 degrees over the spine in 700 ms, in and out, and the shade peaks halfway.
- The corner lifts from 0 to 56 px in 200 ms on hover, and a click turns the page.
- Mobile swings the leaf away from its left edge instead.
- With reduced motion, pages crossfade in 150 ms.