CommerceQuickview

Quick-look product body — composable into a consumer's <Dialog> or <Sheet> to preview a product without leaving the listing. Distinct from commerce-product-detail (the full PDP layout): compact two-column with the essentials and a 'see full details' link.

Installation

pnpm

pnpm dlx @hex-core/cli add commerce-quickview

Usage

tsx

import { CommerceQuickview } from "@/components/ui/commerce-quickview"

Quickview inside a Dialog

Composed into a Dialog from a product card.

tsx

import { CommerceQuickview, Dialog, DialogContent, Button } from "@hex-core/components";

<Dialog>
  <DialogContent className="sm:max-w-3xl">
    <CommerceQuickview
      name="Canvas Tote"
      price="$48"
      eyebrow="Bags"
      description="Roomy everyday tote in heavyweight natural canvas."
      media={<img src="/tote.jpg" alt="Canvas tote, natural" />}
      actions={<Button size="lg">Add to cart</Button>}
      detailsLink={<a href="/p/tote" className="text-primary hover:underline">See full details</a>}
    />
  </DialogContent>
</Dialog>

API Reference

Prop	Type	Default	Description
`name`required	`ReactNode`	—	Product name (renders as <h2> inside the quickview).
`price`required	`ReactNode`	—	Display price.
`media`required	`ReactNode`	—	Single product image — a ReactNode (img or media).
`eyebrow`	`ReactNode`	—	Optional eyebrow above the name (brand / category).
`description`	`ReactNode`	—	Optional short body — abbreviated vs the full detail page.
`options`	`ReactNode`	—	Option selectors (size, color, quantity) — pass your own controls.
`actions`	`ReactNode`	—	Primary actions (add-to-cart).
`detailsLink`	`ReactNode`	—	Optional 'see full details' link to the PDP.
`className`	`string`	—	Additional classes applied to the root wrapper.

AI Guidance

When to use

Use to preview a product without navigating to the PDP — typically inside a Dialog/Sheet triggered from a product card's quick-view button. For the standalone PDP layout, use commerce-product-detail.

When not to use

Don't use as the PDP itself (use commerce-product-detail). Don't render a full description / gallery / reviews here — quickview is for fast browse → add-to-cart decisions.

Common mistakes

Forgetting the detailsLink — visitors who want the full page have no escape from the modal.
Multi-image gallery in media — quickview shows one image; full galleries belong on the PDP.
Form-style option controls without labels — accessible names are the consumer's job.

Accessibility

Renders an <h2> for the product name — inside a Dialog the dialog's own aria-labelledby should point at this <h2> (Radix Dialog handles this when you set DialogTitle, OR you label the dialog separately). Media image needs alt text.

Related components

Token budget: 1124

Verified against @hex-core/components@1.14.0

Edit this page on GitHub