# Single-Column Detail block

> Editorial Single-Column Product Detail Page with Chapter-Numbered Story Body and Centered Buy Box

Magazine-style PDP in a narrow centered column: gallery, price, color and size pickers, quantity stepper, Add To Cart, a chapter-numbered story body, specs table, and quote-carousel reviews. ReUI Rating, Badge with shadcn Item, ButtonGroup, 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-6
- MCP: `get_block("product-detail-6")`
- Built with: Avatar, Badge, Breadcrumb, Button, Button Group, Carousel, Item, Rating
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

One narrow centered column with numbered article sections, a recommend percentage and review quotes paced by progress segments

## Agent notes

- `ARTICLE_SECTIONS` becomes the numbered story chapters, and `ArticleBody` numbers them from array order, so keep reading order
- `POSITIVE_PCT` is computed from `REVIEW_BREAKDOWN` as the 4 and 5 star share, so edit the counts rather than a percentage
- `AUTOPLAY_MS` sets both the review carousel delay and the progress segment fill time, so change it in one place

## When not to use

- A wide two column page with a gallery beside a dense buy column: use [Compact Buy Box](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-5.md) (`get_block("product-detail-5")`)
- A quantity stepper needed on its own, outside a product page: use [Number Field](https://web.dev.reui.io/components/number-field.md) (`get_component("number-field")`)

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

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