# Shadcn Product Detail blocks

> Product detail pages with image galleries, specifications, and purchase options.

- Type: Pro blocks (eCommerce)
- Page: https://web.dev.reui.io/blocks/ecommerce/product-detail
- Blocks: 6
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## Third-party libraries

- Embla Carousel v8: [API reference](https://www.embla-carousel.com/docs/v8/api), [docs](https://www.embla-carousel.com/docs/v8/get-started/react), used by 5 of 6 blocks
- Embla Carousel Autoplay v8: [API reference](https://www.embla-carousel.com/docs/v8/plugins/autoplay), [docs](https://www.embla-carousel.com/docs/v8/plugins), used by 4 of 6 blocks

## Blocks

- [Size Picker Detail](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-1.md): Ecommerce product detail page with image gallery, variant picker, and reviews. Best for sized goods with sold out sizes struck through, 4 detail tabs and a related carousel paged with a page count.
- [Story Product Page](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-2.md): Editorial product detail page with filmstrip gallery, story chapters, and reviews. Best for a color only item with a vertical filmstrip, alternating image and copy chapters with hover captions and an autoplay review carousel.
- [Spec Table Detail](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-3.md): Product Detail Page with Sticky Buy Box, Variant Pickers, and Reviews. Best for an item with a SKU badge and plug type tiles, then an overview, one specs table with group header rows and a review list.
- [Ebook Detail Page](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-4.md): Ebook product detail page with Look Inside gallery, edition format picker, and chapter contents. Best for digital editions whose price follows the format pick, with a Look Inside row, a drop cap sample and chapters with reading minutes.
- [Compact Buy Box](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-5.md): Compact Product Detail Page with Sticky Thumbnail Gallery and Dense Buy Box. Best for a dense buy column with Buy Now under Add To Cart and a low stock line capping quantity, over About and specs side by side.
- [Single-Column Detail](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-6.md): Editorial Single-Column Product Detail Page with Chapter-Numbered Story Body and Centered Buy Box. Best for one narrow centered column with numbered article sections, a recommend percentage and review quotes paced by progress segments.

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.