fetaUI
GitHub

Page Flip

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

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/page-flip
Playground

Spring menu

Maison Céleste

Turn the corner

1 of 8
Cover

Spring menu

Maison Céleste

Turn the corner

1 of 8
Open

Maison Céleste

Welcome

Everything on this menu comes from farms within two hours of the kitchen. It changes when the season does.

LunchTue–Sat, 12:00–14:30

DinnerTue–Sat, 19:00–22:30

ChefCamille Arnaud

2

To start

White asparagus16

Brown butter, hazelnut, chervil

Spring pea soup12

Mint, crème fraîche, sourdough

Trout rillettes15

Pickled radish, rye crisps

Burrata17

Blood orange, fennel pollen

3

2–3 of 8
Peek

Maison Céleste

Welcome

Everything on this menu comes from farms within two hours of the kitchen. It changes when the season does.

LunchTue–Sat, 12:00–14:30

DinnerTue–Sat, 19:00–22:30

ChefCamille Arnaud

2

To start

White asparagus16

Brown butter, hazelnut, chervil

Spring pea soup12

Mint, crème fraîche, sourdough

Trout rillettes15

Pickled radish, rye crisps

Burrata17

Blood orange, fennel pollen

3

2–3 of 8
Turning

Maison Céleste

Welcome

Everything on this menu comes from farms within two hours of the kitchen. It changes when the season does.

LunchTue–Sat, 12:00–14:30

DinnerTue–Sat, 19:00–22:30

ChefCamille Arnaud

2

To start

White asparagus16

Brown butter, hazelnut, chervil

Spring pea soup12

Mint, crème fraîche, sourdough

Trout rillettes15

Pickled radish, rye crisps

Burrata17

Blood orange, fennel pollen

3

2–3 of 8
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/page-flip

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.

Responsive behavior

  • 672 by 522 px on Web, with two 324 by 456 px pages.
  • 358 by 554 px on Mobile, with one 334 by 480 px page.
  • The book picks its layout from its own width, so it also fits narrow columns.
  • Swipe left or right to turn.

Performance

  • Only the visible spread is mounted, plus the leaf during a turn.
  • One page or two is decided by a ResizeObserver, disconnected on unmount.
  • The turn rotates one element, and new turns wait for it to finish.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import PageFlip, BookCover, BookPage, BookDish, BookRow and BookText from @/components/fetaui/page-flip.
  • pages starts at page 2, and the cover is page 1. Give left pages folioSide="start" so numbers sit on the outer edge.
  • Pages have a fixed height, so split long content across pages.
  • Below 440 px it shows one page at a time. pose is for docs. Composes Card and Icon Button.
/docs/components/page-flip/markdown
PreviousNotification Stack
NextReceipt Printer

Related

Card FlipComponentA ticket that turns in 3D. Both sides are the same size, and a shade peaks halfway round.CarouselComponentA rail of tall cards. The centred card grows to 106% and shows its price.PaginationComponentSeven ways to move through pages. The current page lifts onto surface and slides to where you clicked.Lens PagerComponentPaging through a lens, for moments where paging is the experience.CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.