# Spec Table Detail block

> Product Detail Page with Sticky Buy Box, Variant Pickers, and Reviews

Ecommerce product page with stacked gallery, sticky buy box (color and connector pickers, quantity stepper), overview, specs table, rating breakdown, and related items. ReUI Badge, Rating; shadcn Breadcrumb, ButtonGroup, Table. 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-3
- MCP: `get_block("product-detail-3")`
- Built with: Avatar, Badge, Breadcrumb, Button, Button Group, Card, Checkbox, Field, Item, Progress, Rating, Separator, Table
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## Agent notes

- `PLUGS` holds the connector options, and `PlugPicker` hardcodes the Plug Type label, so rename it for other option kinds
- Section headings in `OverviewSection`, `SpecsSection` and `RelatedProducts` are hardcoded headline copy, not read from `PRODUCT`
- `quantity` in `BuyBox` steps up with no ceiling, so cap it at the stock you hold

## When not to use

- A sized item whose details sit in 4 tabs, with out of stock sizes struck through: use [Size Picker Detail](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-1.md) (`get_block("product-detail-1")`)
- A back office flow that creates a product with variant options and SKUs: use [Product Setup Wizard](https://web.dev.reui.io/blocks/application/wizard/wizard-6.md) (`get_block("wizard-6")`)

## Install

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

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