Product Quick View: React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

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

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<ProductQuickView/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/product-quick-view.en.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

Product Quick View