Product Gallery

Galleries 4

About

# Component for product images with zoom interactions ## Features - 🖼️ Dynamic image preview with zoom and pan - 👆 Interactive thumbnail navigation - ⌨️ Keyboard navigation support - 🔍 Image zoom controls - 🎯 Touch-friendly interactions - ♿ Accessible by default

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Product Gallery to your project and fits it to your theme.

Code

How Product Gallery is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client" 

import * as React from "react"
import { ProductGallery, Controls, ProductGalleryPreviewImage, ProductGalleryThumb, ProductGalleryThumbsWrap } from "@/components/ui/product-gallery"

const PRODUCT_IMAGES = [
  "https://cdn.21st.dev/assets/mirror/ac/ac31da27c421d1240b5add1011866c68c23fd988e3412d999c70943ca2468fb5.jpg",
  "https://cdn.21st.dev/assets/mirror/73/7365e182be8c7ab5d86a1b5f578be2e25e59d5def4d7e5a37890d452b56d9963.jpg",
  "https://cdn.21st.dev/assets/mirror/56/5683c49cc4a063719b7234980793b67f17073f5325d5c71bdc71e61b22f762c8.jpg",
  "https://cdn.21st.dev/assets/mirror/8b/8b993f93ace0f90519c57fb690e783d4b34561d0876a3a4e23b71d2b8cda50c7.jpg",
  "https://cdn.21st.dev/assets/mirror/80/80dda9a133e84a153181a9381110c7550ae0e7da028db7c86859d64d077c2c51.jpg",
  "https://cdn.21st.dev/assets/mirror/c2/c2e770d647deb9f1ca62b49c8b868c70e8356d21d5d4b01cdbfff5679dd7718e.jpg",
]
export function ProductGalleryDemo() {
    return (
        <div className="container flex min-h-svh w-full items-center justify-center px-6 py-12">
      <ProductGallery
        className="gap-4 flex items-start justify-start gap-1"
        productImages={PRODUCT_IMAGES}
      >
        <ProductGalleryThumbsWrap className="flex flex-col items-start gap-1">
          {PRODUCT_IMAGES.map((imageUrl, index) => (
            <ProductGalleryThumb
              key={`${imageUrl}-${index}`}
              thumbImageUrl={imageUrl}
              index={index}
            />
          ))}
        </ProductGalleryThumbsWrap>
        <ProductGalleryPreviewImage>
          <Controls className=" flex flex-col gap-1" />
        </ProductGalleryPreviewImage>
      </ProductGallery>
    </div>
    )
}