Book Card React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import BookCard from "./BookCard";

export default function Example() {
  return (
    <BookCard
      cover={"QUIET\nOBJECTS"}
      children={"Look closer.\nThere is more here."}
      coverImage={"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%221000%22%20viewBox%3D%220%200%20800%201000%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22bg%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23e3d8c5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a6a09d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22blue%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23bdd0dc%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%236e879f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23283a50%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22cream%22%20x2%3D%221%22%20y2%3D%22.8%22%3E%3Cstop%20stop-color%3D%22%23f8e9d0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23d4b38e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23896854%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22shade%22%3E%3Cstop%20stop-color%3D%22%23272026%22%20stop-opacity%3D%22.4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23272026%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%237c909c%22%20d%3D%22M0%200h800v1000H0z%22%2F%3E%3Cellipse%20cx%3D%22420%22%20cy%3D%22820%22%20rx%3D%22260%22%20ry%3D%2280%22%20fill%3D%22url(%23shade)%22%2F%3E%3Crect%20x%3D%22235%22%20y%3D%22510%22%20width%3D%22330%22%20height%3D%22290%22%20rx%3D%22145%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22185%22%20y%3D%22260%22%20width%3D%22440%22%20height%3D%22250%22%20rx%3D%22125%22%20transform%3D%22rotate(-18%20405%20385)%22%20fill%3D%22url(%23blue)%22%2F%3E%3C%2Fsvg%3E"}
      color={"#8b7370"}
      paperColor={"#eee5d6"}
      inkColor={"#42332b"}
      defaultOpen={false}
      width={220}
      height={400}
      label={"Open or close the book"}
      style={{
        "fontSize": 29,
        "fontWeight": 500,
        "letterSpacing": "-.045em",
        "whiteSpace": "pre-line"
      }}
    />
  );
}

Using Book Card

Put the closed cover content in cover and the inside content in children. An optional coverImage can provide the cover artwork.

Leave horizontal space for the cover to swing open. Pair open with onOpenChange when another control should operate the book.

Props

Name	Type	Required	Default	Description
cover	ReactNode	No	undefined	Content printed on the cover. Text or non-interactive React content is recommended.
children	ReactNode	No	undefined	Content of the inside page. Hidden content is inert while the cover is closed.
coverImage	string	No	""	Optional image URL for the cover.
color	string	No	"#9b7465"	Cover colour, visible when no image is supplied.
paperColor	string	No	"#eee5d6"	Page and inner cover colour.
inkColor	string	No	"#332a27"	Inside page text colour.
open	boolean	No	undefined	Optional controlled open state.
defaultOpen	boolean	No	false	Initial open state when uncontrolled.
onOpenChange	function	No	undefined	Called with the requested open state.
width	number	No	220	Preferred book width in pixels, capped to 42% of the viewport to leave room for opening.
height	number \| string	No	360	Bounded viewport height in pixels or a CSS length.
label	string	No	"Open or close book"	Accessible book toggle label.
className	string	No	""	Additional classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.