Book

A sleek and interactive 3D book component that flips open on hover, featuring smooth motion, layered depth, and customizable content.

Preview

manga page 1
manga cover
manga page 2

Installation

npx shadcn@latest add "https://ui.rechesoares.com/registry/book.json"

Component Props

PropTypeDefaultRequiredDescription
contentReactNode-YesThe inner content of the book.
coverReactNode-YesThe front cover of the book.
backOfCoverReactNode-NoOptional content displayed on the inside of the front cover.
rotatenumber-30NoInitial Y-axis rotation of the entire book.
coverRotatenumber-100NoY-axis rotation of the front cover when hovered.
colorstring#e30012NoColor used for the book's spine and back cover.
classNamestring-NoCustom class name for additional styling.