Loading…

Book

beta

A 3D book cover drawn in CSS that tilts, or swings open to reveal its first page, on hover and keyboard focus.

Display
1 file
2 npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add book

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Book } from "@/components/ui/book";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Open
With Illustration And Logo
As Link

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Book>

Prop	Type	Default
`title` (required) The title on the cover.	`ReactNode`	—
`color` Cover colour. Any CSS colour; defaults to the primary token.	`string`	—
`effect`	`"tilt" \| "open" \| "none"`	`"tilt"`
`illustration` Artwork for the colour band of the `stripe` variant.	`ReactNode`	—
`inside` What the open cover reveals, for `effect="open"`.	`ReactNode`	—
`logo` A mark at the foot of the cover.	`ReactNode`	—
`textColor` Title colour. Defaults to the foreground token (stripe) or primary-foreground (simple).	`string`	—
`variant`	`"stripe" \| "simple"`	`"stripe"`
`width` Width in pixels; the height follows at 60:49.	`number`	`196`
`asChild` Renders the child element as the book — typically a link. The book then takes keyboard focus itself, and focus opens or tilts it like hover does.	`boolean`	`false`

Plus every attribute of <div> except title.

Accessibility

The title is real text; the spine shading, page edges, back cover and inside of the cover are aria-hidden. Keyboard focus anywhere in the book (or on the book itself, when it is rendered as a link with asChild) does what hover does, and the link gets the shared focus ring. The tilt is decoration and does not happen under prefers-reduced-motion; the open effect still reveals its content there, instantly.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

title

The title on the cover.

ReactNode

—

color

Cover colour. Any CSS colour; defaults to the primary token.

string

—

effect

"tilt" | "open" | "none"

"tilt"

illustration

Artwork for the colour band of the stripe variant.

ReactNode

—

inside

What the open cover reveals, for effect="open".

ReactNode

—

logo

A mark at the foot of the cover.

ReactNode

—

textColor

Title colour. Defaults to the foreground token (stripe) or primary-foreground (simple).

string

—

variant

"stripe" | "simple"

"stripe"

width

Width in pixels; the height follows at 60:49.

number

196

asChild

Renders the child element as the book — typically a link. The book then takes keyboard focus itself, and focus opens or tilts it like hover does.

boolean

false