When to use it

Use QuickView on product listing pages when visitors should be able to preview a product's key details and add it to the cart without navigating away from the grid. It keeps browsing momentum high by showing imagery, pricing, and an action slot in a side panel or modal.

If the visitor needs the full product experience (all variants, reviews, specifications), link to the PDP instead.

Composition notes

QuickView is a controlled overlay with a product data prop and a children action slot:

• open and onOpenChange manage the panel visibility.
• product takes a QuickViewProduct object with title, price (ReactNode), description, images, and optional href (link to full PDP).
• children is the action slot rendered below the product details. Pass add-to-cart buttons, variant selectors, or save/wishlist controls.
• mode (where supported) switches between sheet (default) and modal presentation.
• useOverlayController is the recommended helper when a listing trigger needs to keep the selected payload and the open state together.

Behavior and theming guidance

The default sheet mode slides in from the right and preserves the visitor's scroll position on the listing page. The modal mode centers the preview and dims the background, which creates more focus but interrupts browsing flow.

The product image gallery is rendered from the images array. If the product has an href, the title becomes a link to the full PDP for visitors who want more details.