Book Cover
A CSS 3D book with spine, page block and drawn cover that turns to face you and opens on its first page on hover or focus.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Book title: drawn on the cover, the spine and the title page. |
| author | string | — | Author line. The book is named “Title by Author”. |
| tone | "ink" | "paper" | "ember" | "slate" | "ink" | Cover colour from theme tokens. |
| pattern | "rings" | "lines" | "grid" | "sun" | "rings" | Drawn cover motif when art is not given. |
| art | ReactNode | — | Custom cover art. |
| firstPage | ReactNode | — | Content of the first page, revealed when the cover opens. Defaults to a title page. |
| width | number | 132 | Cover width in px. Height is 1.5 times the width. |
| thickness | number | 20 | Spine thickness in px. |
| open | boolean | — | Force the cover open or closed. Omit to open on hover and focus. |
| href | string | — | Render as a link. Without it the book is a button. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.