Book Flip

An interactive 3D Book Flip component simulating realistic book page turns, dynamic spine shifts, center fold shadows, leaf peeking, and bottom icon toolbar controls.

Variations

Book Flip Component

Interactive 3D book cover, open spreads with center spine fold shadow, leaf peeking, and icon-only navigation controls.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Book Flip

npx shadcn@latest add @algorize-ui/book-flip

components/custom/book-flip.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Book Flip needs only the cn helper and lucide-react, which the installation guide already put in place.

Features

3D Book Cover & Spread Transition: Starts in single-cover mode and dynamically centers into a 2-page spread upon flipping leaves.
Center Spine Crease Shadow: Realistic crease fold shadow integrated on page surfaces.
Keyboard Navigation: Press Left Arrow (←) and Right Arrow (→) keys to flip through pages.
Minimal Icon Toolbar: Features < Prev, Reset, X / Y counter, and Next > icon-only controls.

Props Reference: BookFlip

Prop	Type	Default	Description
`pages`	`PageFlipLeaf[]`	`DEFAULT_PAGES`	Array of page leaves, each containing front and back images & metadata.
`turnedIndex`	`number`	`undefined`	Controlled turned page count.
`defaultTurnedIndex`	`number`	`0`	Default turned page count (0 = closed cover).
`onPageChange`	`(turnedCount: number, totalLeaves: number) => void`	`undefined`	Callback fired when page count changes.
`pageWidth`	`number`	`260`	Width of a single page leaf in pixels.
`pageHeight`	`number`	`380`	Height of a single page leaf in pixels.
`showControls`	`boolean`	`true`	Toggles visibility of the bottom navigation controls toolbar.
`showSpineBinding`	`boolean`	`true`	Toggles outer book spine crease line overlay.
`showPageNumbers`	`boolean`	`true`	Toggles page numbering badges on leaves.
`autoplay`	`boolean`	`false`	Enables automatic page flipping timer.
`autoplayInterval`	`number`	`3500`	Interval in milliseconds between automatic page flips.