Book

Updated: August 31, 2026

Book renders artwork as a physical book rather than a flat image: a cover, a blurred spine shadow, and a visible block of pages hinged on the cover's right edge. On hover the whole object turns, and because the rotation is a real 3D transform the page block turns with it instead of sliding behind it. Use it wherever a cover is the subject — a library, a reading list, a chapter index. For a plain image in a frame, use Media.

Book

<Row maxWidth={12}>
<Book src="/images/cover.jpg" alt="Once UI" />
</Row>

Sizing

Book fills the box you give it and keeps its own cover proportions, so size it from the outside — a maxWidth on the parent, or a grid cell. It takes every Flex prop, so aspectRatio, radius and the spacing tokens work as usual.

As a link

Pass href to make the whole book a link. It renders through ElementType, so internal routes get client-side navigation and external ones get the right rel.

Linked book

<Book
href="/library/once-ui"
src="/images/cover.jpg"
alt="Once UI"
/>

Overlaying a title

children render above the artwork, inside a dark-themed column, so text sits legibly on top of a cover. Leave src off entirely to get a blank cover you compose yourself.

Overlay

Once UIA design system

<Book src="/images/cover.jpg" alt="Once UI">
<Column fill vertical="end" padding="20" gap="4">
  <Text variant="heading-strong-m" onBackground="neutral-strong">Once UI</Text>
  <Text variant="label-default-s" onBackground="neutral-medium">A design system</Text>
</Column>
</Book>

Motion

The tilt is hover-gated and switched off under prefers-reduced-motion. On touch devices the cover stays square-on: there is no hover to return from, and a permanently rotated cover reads as a rendering fault rather than a style.

API reference

Prop	Type	Default
src Cover artwork. Omit it for a blank cover you fill with children.	string	—
alt Alternative text for the cover artwork.	string	—
sizes Responsive sizes hint passed to the underlying image.	string	—
href Renders the whole book as a link.	string	—
children Overlaid on the cover, above the artwork.	React.ReactNode	—
…and every FlexProps prop	inherited	—

ComponentsBlockQuote

ComponentsCarousel

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club