Geist Design System

Book

A responsive book component.

Default
The user experience of the Frontend Cloud

Variants
The user experience of the Frontend Cloud
The user experience of the Frontend Cloud

Custom color
How Vercel improves your website's search engine ranking
Design Engineering at Vercel
The user experience of the Frontend Cloud

Custom illustration
The user experience of the Frontend Cloud
The user experience of the Frontend Cloud

Responsive
The user experience of the Frontend Cloud

Width
The user experience of the Frontend Cloud
The user experience of the Frontend Cloud
The user experience of the Frontend Cloud

Textured
Design Engineering at Vercel
Design Engineering at Vercel
Design Engineering at Vercel
Design Engineering at Vercel
Design Engineering at Vercel
Design Engineering at Vercel

Best Practices

When to use

  • Use Book for marketing pages, docs landing covers, and changelog hero shots where content needs the metaphor of a labeled volume.
  • For in-product cards and dashboard tiles, use Card; Book is too decorative for repeated UI rows.
  • Pick simple when the title alone carries the design and stripe when an icon or color stripe adds hierarchy or category cues.

Behavior

  • Set the color prop from design tokens (var(--ds-blue-700), var(--ds-amber-600)) instead of raw hex so the cover follows light/dark theme tokens.
  • Reserve the textured variant for hero shots; on a row of multiple Books the texture competes with the labels.
  • Use the responsive width prop to keep covers proportional across breakpoints; squashing aspect ratio breaks the metaphor.

Accessibility

  • Treat the cover as decorative chrome and surface the title via the underlying heading element so screen readers don’t double-announce.
  • Inner illustrations need alt text only when they communicate something the title doesn’t; otherwise mark them aria-hidden.
  • When the Book wraps a link, put the focus ring on the link itself, not the cover, so keyboard users see the actual hit target.