Size Guide
Commerce
Source and install need .
pnpm dlx shadcn@latest add @assembli/product-quick-viewProduct Quick View
A quick-view dialog for product grids, built from Product Gallery and Variant Picker. Rating, price and savings, options with stock, a quantity stepper and Add to bag that confirms in place with View bag. Arrows and ← → step to neighbouring products without closing. Also exports QuickViewCard, a tile whose photo swaps on hover and whose Quick view button rises from its foot.
Props
Other props pass through to the root element.
products*
QuickViewProduct[]
index*
number | null
The product shown, or null when closed.
onIndexChange*
(index: number | null) => void
onAddToBag
(product: QuickViewProduct, selection: VariantSelection, quantity: number) => v…
Return a promise to show "Adding…" until it settles.
onViewBag
() => void
note
React.ReactNode
A line of reassurance under the button.
currency
string
Default
"USD"locale
string
Default
"en-US"container
HTMLElement | React.RefObject<HTMLElement | null> | null
Mount inside this element instead of
<body>.className
string
| Description | |||
|---|---|---|---|
| products* | QuickViewProduct[] | – | |
| index* | number | null | – | The product shown, or null when closed. |
| onIndexChange* | (index: number | null) => void | – | |
| onAddToBag | (product: QuickViewProduct, selection: VariantSelection, quantity: number) => v… | – | Return a promise to show "Adding…" until it settles. |
| onViewBag | () => void | – | |
| note | React.ReactNode | – | A line of reassurance under the button. |
| currency | string | "USD" | |
| locale | string | "en-US" | |
| container | HTMLElement | React.RefObject<HTMLElement | null> | null | – | Mount inside this element instead of |
| className | string | – |
