Product Quick View

A product card that opens a quick view dialog — image switching, variant selection, and add to cart.

Hovering a product card reveals a quick view button; clicking it morphs the card open into a centered dialog through layoutId, with a thumbnail gallery on the left and color swatches, size selection, and a quantity stepper on the right. After adding to cart, the button transforms into success feedback — a good fit for shortening the path to purchase from an e-commerce listing page.

Loading preview…

npx shadcn@latest add "https://webberui.com/r/product-quick-view.json?t=<install token>"

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Product dataproduct

<ProductQuickView />

Installation

npx shadcn@latest add "https://webberui.com/r/product-quick-view.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/product-quick-view.

Usage

import { ProductQuickView } from "@/components/ui/product-quick-view";

<ProductQuickView
  product={{
    name: "Lightweight knit running shoe",
    price: 2680,
    originalPrice: 3280,
    rating: 4.5,
    badge: "New",
    emoji: "👟",
    colors: [
      { name: "Misty blue", hue: 210 },
      { name: "Coral", hue: 16 },
    ],
    sizes: ["US 8", "US 9", "US 10"],
  }}
  onAddToCart={({ color, size, quantity }) => {
    console.log(color, size, quantity);
  }}
/>

Props

Prop	Type	Default	Description
`product`	`QuickViewProduct`	—	Product data (see the table below)
`onAddToCart`	`(selection: { color: string; size: string; quantity: number }) => void`	—	Add-to-cart callback, returning the selected color, size, and quantity
`className`	`string`	—	Forwarded to the card's outer container

QuickViewProduct fields:

Field	Type	Default	Description
`name`	`string`	—	Product name
`price`	`number`	—	Selling price (in New Taiwan dollars)
`originalPrice`	`number`	—	Struck-through original price; when provided, the discount percentage is shown
`description`	`string`	—	Short product description, shown below the price in the dialog
`rating`	`number`	—	Star rating (0–5)
`badge`	`string`	—	Tag text in the corner of the card, for example "New"
`emoji`	`string`	`"🛍️"`	Emoji icon in the center of the placeholder product image
`colors`	`{ name: string; hue: number }[]`	—	List of selectable colors; `hue` generates the swatches and the gradient placeholder image
`sizes`	`string[]`	—	List of selectable sizes

Accessibility

The dialog uses role="dialog" with aria-modal, the close button is focused automatically on open, and it can be closed with Esc or by clicking the overlay
The quick view button also appears on keyboard focus-visible, so it does not depend on mouse hover
The swatch, size, and thumbnail buttons all have aria-labels or readable text, and mark their selected state with aria-pressed
Quantity and add-to-cart state changes are announced through aria-live="polite"
When the user has "reduce motion" enabled at the system level, the morph expand animation is disabled in favor of a plain fade in and fade out