For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- A category listing of many items side by side, with swatches or quick add per tile: use the Product Grid blocks
- A staff view of one SKU's stock levels and reorder rules, not a shopper page: use the Inventory blocks
Agent notes
- Each block reads one
PRODUCTrecord and aGALLERYlist from its data.ts; map your catalog item onto those shapes - The Add to Cart or Add to Bag
Buttonhas noonClickin any block, and the heart only flips localwishlistedstate - Each page.tsx wraps
ProductDetailin amin-h-svhmain, andProductDetailsets its own max width and padding; drop both in your store layout
Third-party API docs
- Embla Carousel v8: API reference, docs, used by 5 of 6 blocks
- Embla Carousel Autoplay v8: API reference, docs, used by 4 of 6 blocks
Markdown
https://web.dev.reui.io/blocks/ecommerce/product-detail.mdMCP
search({ query: "product detail", type: "block", category: "product-detail" })Shadcn Product Detail Blocks: Galleries, Options and Purchase Panels
A product detail page is a gallery, a decision panel and a long tail of information. These blocks give each its finished form: the gallery with thumbnails and zoom, the panel with size, color, quantity, price and stock, and the tabs for specs, shipping and reviews.
All Product Detail Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Size Picker Detail Ecommerce product detail page with image gallery, variant picker, and reviews
- Story Product Page Editorial product detail page with filmstrip gallery, story chapters, and reviews
- Spec Table Detail Product Detail Page with Sticky Buy Box, Variant Pickers, and Reviews
- Ebook Detail Page Ebook product detail page with Look Inside gallery, edition format picker, and chapter contents
- Compact Buy Box Compact Product Detail Page with Sticky Thumbnail Gallery and Dense Buy Box
- Single-Column Detail Editorial Single-Column Product Detail Page with Chapter-Numbered Story Body and Centered Buy Box
What the Product Detail blocks cover
eCommerce screens, each a full block with fixture data:
- Ecommerce product detail page with image gallery, variant picker, and reviews
- Editorial product detail page with filmstrip gallery, story chapters, and reviews
- Product Detail Page with Sticky Buy Box, Variant Pickers, and Reviews
- Ebook product detail page with Look Inside gallery, edition format picker, and chapter contents
- Compact Product Detail Page with Sticky Thumbnail Gallery and Dense Buy Box
- Editorial Single-Column Product Detail Page with Chapter-Numbered Story Body and Centered Buy Box
Built from
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Does the gallery support video?
The gallery takes a media list; the blocks show images, and a video slide follows the same slot with your player.
How do I install a Product Detail block?
Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.
Is a license needed?
Product Detail blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.