# Story Product Page block

> Editorial product detail page with filmstrip gallery, story chapters, and reviews

Full-page showcase: filmstrip gallery, sticky buy box with swatches, rating and discount badge, narrative story chapters, grouped spec tables, and an autoplaying review carousel. ReUI Badge, Rating; shadcn Carousel, Card, Button. Product page, PDP.

- 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-2
- MCP: `get_block("product-detail-2")`
- 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

A color only item with a vertical filmstrip, alternating image and copy chapters with hover captions and an autoplay review carousel

## Agent notes

- `COLORS` is the only variant list in `BuyBox`, so a sized or configurable item needs its own picker added
- `STORY_SECTIONS` drives the alternating chapters, and each entry sets its `imageSide`, `image` and `specs` callouts
- The See All reviews `Button` in `DetailFooter` links to a reviews path built from `sku`, so create that route

## When not to use

- An item that needs a size pick and a quantity stepper beside the color choice: use [Compact Buy Box](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-5.md) (`get_block("product-detail-5")`)
- An item sold by both color and connector type, ending on a related products row: use [Spec Table Detail](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-3.md) (`get_block("product-detail-3")`)

## 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-2
```

## 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.