Product Detail 6 - Sticky buy box with accordion detailsPro
A long-form product page with an image mosaic and expandable accordion sections for details, materials, care and shipping beside a sticky bordered buy box with price, stock, quantity and delivery estimate. Use it for considered purchases where shoppers scroll through specs while keeping the purchase controls in view.
About Product Detail 6
A long-form product page with an image mosaic and expandable accordion sections for details, materials, care and shipping beside a sticky bordered buy box with price, stock, quantity and delivery estimate. Use it for considered purchases where shoppers scroll through specs while keeping the purchase controls in view.
Product Detail 6 is a pro product detail block for React, built on shadcn/ui and Tailwind CSS. It ships as 121 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- ecommerce
- pdp
- sticky
- buy-box
- accordion
- details
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/product-detail-06Dependencies installed automatically: lucide-react.
Uses: accordion, badge, button, reveal, separator, utils.
Usage
import ProductDetail06 from "@/components/blocks/product-detail-06"
export default function Page() {
return <ProductDetail06 />
}