Book3D
book-3dDisplays a book cover with perspective depth and interactive 3D tilt.
Usage
Basic usage
Pass title / subtitle Ready-to-use brand gradient cover; thickness is revealed when still, and can be corrected when hovering.
Hulianhulianui
tsx
<Book3D title="Hulian" subtitle="hulianui" />Customized cover gradient
coverColor Give the cover gradient starting and ending colors.
CSSConversion
tsx
<Book3D
title="CSS"
subtitle="Convert"
coverColor={{ from: "#f7b733", to: "#e0992b" }}
/>Corner mark ribbon
ribbon + ribbonTone Attach a ribbon (danger / brand / success) to the upper right corner of the cover.
HTML5
tsx
<Book3D
title="HTML"
subtitle="5"
ribbon="N°1"
ribbonTone="danger"
coverColor={{ from: "#e0654a", to: "#c14a32" }}
/>Bookshelf Arrangement
Multiple books side by side, hover over to correct each one.
CSSConversionJSFUNCTIONTSTYPES
tsx
<div className="flex flex-wrap gap-8">
<Book3D title="CSS" subtitle="Convert" ribbon="NEW" coverColor={{ from: "#f7b733", to: "#e0992b" }} />
<Book3D title="JS" subtitle="FUNCTION" coverColor={{ from: "#5aa6e0", to: "#3f7fc0" }} />
<Book3D title="TS" subtitle="TYPES" ribbonTone="brand" />
</div>When to use
Use Book3D for a dimensional book in a portfolio, bookshelf, or cover wall. It is decorative rather than tabular: use Table or PricingTable for data, and List for a regular grid.
Import
ts
import { Book3D } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| cover | string | — | Cover image URL, taking precedence over coverColor. |
| logo | string | — | Product logo or app icon centered on the cover. |
| coverColor | { from: string; to: string } | Brand gradient | Cover gradient. |
| spineColor | string | "#efe9dd" | Light paper color used for the spine and page block. |
| thickness | string | "2.25rem" | Spine thickness as a CSS length. |
| ribbon | string | — | Corner ribbon such as "NEW" or "N°1". |
| ribbonTone | "brand" | "danger" | "success" | "danger" | Ribbon tone. |
| href | string | — | Makes the whole book a link. |
| target | string | — | Link target when href is present. |
| className | string | — | Root class name. |
Events
| Event | Type | Description |
|---|---|---|
| onClick | () => void | Makes the book a button when href is absent. |
Slots
| Slot | Type | Description |
|---|---|---|
| title* | ReactNode | Main cover title. |
| subtitle | ReactNode | Cover subtitle. |
| inside | ReactNode | Inside-page content revealed when the front cover opens on hover. |
Usage notes
coveroverridescoverColorwhen both are supplied.- The hover opening is CSS-only and automatically degrades under reduced motion; do not wrap it in another JavaScript animation.
hrefandonClickare alternatives:hrefrenders an anchor, otherwiseonClickrenders a button.
Related
Table · ProTable · PricingTable · JsonViewer · EditableTable · List
Playground
CSSConversion
<Book3D title="CSS" subtitle="Conversion" ribbon="NEW" ribbonTone="danger" coverColor={{ from: "#f7b733", to: "#e0992b" }} />