Shadcn UI Product Quick View Block
ProductQuickView8 is a modal quick view built with shadcn/ui. It opens in a wide dialog with the default close button hidden in favor of a round secondary icon in the corner. The body scrolls while a fixed footer pins a full-width add to cart button. Above that, a carousel handles multiple photos, then price, product name as dialog title, and paragraph description text.
Styling stays restrained: standard padding, no variant pickers, emphasis on imagery and copy length you provide. The footer bar reads as commerce chrome similar to native app sheets.
Simple relative to other quick views: no size or color matrix, good for electronics or single-SKU highlights where the goal is read-and-buy. You need several images, structured price, and descriptive text. Complexity is low; integration work is mostly wiring open state from listing cards.
Long descriptions scroll under the carousel; the primary action remains visible because of the pinned footer.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
price @shadcnblocks | Registry |
aspect-ratio @shadcn | Registry |
button @shadcn | Registry |
carousel @shadcn | Registry |
dialog @shadcn | Registry |