Product Quick View 1 - Dialog with gallery, variants and add to cart

A product grid where each card opens a centered quick view dialog with a thumbnail gallery, color and size selectors, quantity stepper and an Add to cart button. Use it on category pages so shoppers can configure and add items without leaving the listing.

About Product Quick View 1

A product grid where each card opens a centered quick view dialog with a thumbnail gallery, color and size selectors, quantity stepper and an Add to cart button. Use it on category pages so shoppers can configure and add items without leaving the listing.

Product Quick View 1 is a free product quick view block for React, built on shadcn/ui and Tailwind CSS. It ships as 142 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • quick view
  • dialog
  • gallery
  • variants
  • add to cart
  • product grid

Installation

  1. Add the Chocolate UI registry to your components.json (see the installation guide).
  2. Run the shadcn CLI:
npx shadcn@latest add @chocolate/product-quick-view-01

Dependencies installed automatically: lucide-react.

Uses: button, dialog, reveal, utils.

Usage

import ProductQuickView01 from "@/components/blocks/product-quick-view-01"

export default function Page() {
  return <ProductQuickView01 />
}

FAQ