# Ebook Detail Page block

> Ebook product detail page with Look Inside gallery, edition format picker, and chapter contents

Editorial book PDP for ebook, audiobook, and bundle editions: captioned Look Inside gallery, sticky buy box with format picker, drop-cap sample, three-part chapter TOC, spec cards, autoplay review carousel. ReUI Rating, Badge, shadcn Card, Carousel.

- Type: Pro block
- Category: [Product Detail](https://web.dev.reui.io/blocks/ecommerce/product-detail.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-4
- MCP: `get_block("product-detail-4")`
- Built with: Avatar, Badge, Breadcrumb, Button, Card, Carousel, Item, Progress, Rating
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Digital editions whose price follows the format pick, with a Look Inside row, a drop cap sample and chapters with reading minutes

## Agent notes

- Each `SIZES` edition carries its own `price`, `compareAtPrice` and `discountLabel`, and `PRODUCT` has no price of its own
- The free sample link reads `sampleHref` from `SAMPLE_EXCERPT` and points at a placeholder path, so host a real sample
- `TOC_INTRO` hardcodes the chapter count and reading time in its `headline` and `lede`, so edit it with `TOC_PARTS`

## When not to use

- A physical item picked by color and size at a single price: use [Size Picker Detail](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-1.md) (`get_block("product-detail-1")`)
- A hardware item sold by color, told through alternating story chapters: use [Story Product Page](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-2.md) (`get_block("product-detail-2")`)

## Third-party libraries

- Embla Carousel Autoplay v8: [API reference](https://www.embla-carousel.com/docs/v8/plugins/autoplay), [docs](https://www.embla-carousel.com/docs/v8/plugins)
- Embla Carousel v8: [API reference](https://www.embla-carousel.com/docs/v8/api), [docs](https://www.embla-carousel.com/docs/v8/get-started/react), through shadcn Carousel

## Install

```bash
npx shadcn@latest add @reui/product-detail-4
```

## About Product Detail blocks

### When to use

- A storefront page for one item: gallery, price, specs, reviews and an add to cart button
- Goods the shopper configures first, picking a color, size, connector or edition before buying
- Editorial launch pages that tell one item's story, or an ebook sold in several editions

### When not to use

- A single item tile or a carousel of tiles, each linking out to its own page: use the [Product Card blocks](https://web.dev.reui.io/blocks/ecommerce/product-card.md)
- A category listing of many items side by side, with swatches or quick add per tile: use the [Product Grid blocks](https://web.dev.reui.io/blocks/ecommerce/product-grid.md)
- A staff view of one SKU's stock levels and reorder rules, not a shopper page: use the [Inventory blocks](https://web.dev.reui.io/blocks/solutions/inventory.md)

### Agent notes

- Each block reads one `PRODUCT` record and a `GALLERY` list from its data.ts; map your catalog item onto those shapes
- The Add to Cart or Add to Bag `Button` has no `onClick` in any block, and the heart only flips local `wishlisted` state
- Each page.tsx wraps `ProductDetail` in a `min-h-svh` main, and `ProductDetail` sets its own max width and padding; drop both in your store layout

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.