Product Detail 19 - Product Page With Sticky Cart Bar

Pro

A product page with an image carousel and thumbnails, low-stock progress bar, color and material options, purchase buttons, a specifications accordion, and a sticky add-to-cart bar on scroll.

Shadcn Product Detail 19 block

Component data

ID
product-detail19
Access
pro
Created
Nov 11, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria

Product Detail 19 block design & features

The block is a furniture product page built with shadcn/ui. A large photo carousel with a thumbnail row sits on the left, and the right column has the product name, a red sale price beside the original price, and a progress bar with a low-stock message.

Below a short description come square color swatches and material buttons with the selected values named in their labels, a quantity stepper next to add to cart, a full-width buy now button, two service lines and a bordered offer card. An accordion under the gallery holds a striped specifications table, product details and care notes.

When the main purchase buttons scroll out of view, a compact bar with a thumbnail, name, price and add button slides in from the bottom, and it hides again when they return. Images open in a PhotoSwipe lightbox, and all content comes from one data object at the top of the file.