# Compact Buy Box block

> Compact Product Detail Page with Sticky Thumbnail Gallery and Dense Buy Box

Ecommerce product page: sticky thumbnail gallery, dense buy box with color and size pickers, quantity stepper, Add to Cart, Buy Now, wishlist, specs, rating breakdown and review carousel. ReUI Rating, Badge; shadcn Button, Carousel, Progress.

- 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-5
- MCP: `get_block("product-detail-5")`
- Built with: Avatar, Badge, Button, Button Group, Carousel, Item, Progress, Rating, Separator
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## Agent notes

- `stockLeft` is one count that caps `quantity` and fills the low stock line for every color and size, so wire per variant stock
- The Buy Now `Button` in `BuyBox` has no `onClick`, so route it straight to your checkout
- `shippingFreeOver` feeds the free shipping line under the pickers, so set it to your threshold

## When not to use

- Sizes that can be sold out, with details split across 4 tabs: use [Size Picker Detail](https://web.dev.reui.io/blocks/ecommerce/product-detail/product-detail-1.md) (`get_block("product-detail-1")`)
- A thumbnail gallery needed on its own, outside a product page: use [Carousel](https://web.dev.reui.io/components/carousel.md) (`get_component("carousel")`)

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

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