JJabKit
Theme preference

ProductQuickView4

1.1.0

Product quick-view dialog with an image carousel, optional price and color groups, size or format options, and a primary action plus details link.

npx jabkit add product-quick-view4

Component Data

ID
product-quick-view4
Category
marketing
Version
1.1.0
Added
2026-09-05
Type
block
Keyboard nav
Yes
Reduced motion
Yes
productquick-viewmarketingecommercedialogcarouselvariantscart

Dependencies

  • lucide-react
  • clsx
  • tailwind-merge

Examples

Default

<div className="bg-background text-foreground">
      <ProductQuickView4 {...productQuickView4Mocks.default} />
    </div>

Variants

<div className="bg-background text-foreground">
      <ProductQuickView4 {...productQuickView4Mocks.alternate} />
    </div>

StudioPreview

<div className="bg-background text-foreground">
      <ProductQuickView4 {...productQuickView4Mocks.studio} />
    </div>