A product page section with a switchable gallery and hover zoom, rating, price with savings, color swatches, size chips, a quantity stepper and an add to bag button that morphs into a confirmation.
Brushed recycled wool with a cotton twill lining, corozo buttons and two bellowed chest pockets. Cut roomy to layer over a knit.
npx shadcn@latest add https://hyperblur.dev/r/shop-product-detail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shop-product-detail.tsx.
import { ShopProductDetail } from "@/components/hyperblur/shop-product-detail"
<ShopProductDetail name="Ridgeline Wool Overshirt" price={168} onAddToBag={(s) => console.log(s)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Northwind Supply Co." | Brand line above the name. |
| name | string | "Ridgeline Wool Overshirt" | Product name. |
| badge | string | "New season" | Badge on the main photo. Empty string hides it. |
| price | number | 168 | Current price. |
| compareAtPrice | number | 210 | Original price. When higher than `price` it is struck through with a Save badge. |
| currency | string | "$" | Currency symbol placed before amounts. |
| rating | number | 4.8 | Average rating from 0 to 5. |
| reviewCount | number | 2146 | Number of reviews next to the stars. |
| description | string | "Brushed recycled wool..." | Short product description. |
| colors | { name: string; value: string }[] | Moss, Ink, Clay, Oat | Color swatches. The selected value recolors the product illustration. |
| defaultColor | string | Name of the initially selected color. Defaults to the first. | |
| sizes | { label: string; available?: boolean }[] | XS to XXL, XXL sold out | Size chips. `available: false` renders a struck out, disabled chip. |
| defaultSize | string | "M" | Initially selected size. Without one, adding asks the shopper to choose. |
| maxQuantity | number | 10 | Upper bound of the quantity stepper. |
| deliveryNotes | string[] | 3 delivery and returns notes | Lines in the delivery box, each with an icon. |
| addLabel | string | "Add to bag" | Button label before adding. |
| addedLabel | string | "Added to bag" | Button label after adding. |
| onAddToBag | (selection: { color: string; size: string; quantity: number }) => void | Called when the item is added. | |
| accent | string | "#2f7bff" | Accent for the add button, selected thumbnail and icons. |