# Size Picker Detail block

> Ecommerce product detail page with image gallery, variant picker, and reviews

Full product page with breadcrumb nav, carousel gallery, buy box with color and size variants, tabbed specs, shipping, reviews, and related items. ReUI Badge, Rating; shadcn Carousel, Tabs, Table, Card, Button. For storefront, catalog, retail 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-1
- MCP: `get_block("product-detail-1")`
- Built with: Avatar, Badge, Breadcrumb, Button, Card, Carousel, Checkbox, Field, Item, Progress, Rating, Separator, Table, Tabs
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Sized goods with sold out sizes struck through, 4 detail tabs and a related carousel paged with a page count

## Agent notes

- In `SIZES` a `state` of `out` renders that size disabled and struck through, so derive it from your stock
- The Write a Review `Button` in `ReviewsSection` has no `onClick`, so open your review form from it
- Related hearts toggle local `liked` state seeded from `defaultLikedRelatedIds`; persist them to your wishlist

## When not to use

- A buy column that needs Buy Now and a stock capped quantity beside a sticky gallery: use [Compact Buy Box](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-5.md) (`get_block("product-detail-5")`)
- A masonry wall of products to filter and sort, not a page for one item: use [Masonry Gallery](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-6.md) (`get_block("product-card-6")`)

## 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), through shadcn Carousel

## Install

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

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