Product Gallery 2 - Zoom lens on hover
A product image with a square lens that follows the pointer and a magnified pane beside it showing the area under the lens, plus thumbnails to switch images. Use it for products where texture and fine detail sell, like fabrics, watches or jewelry.
About Product Gallery 2
A product image with a square lens that follows the pointer and a magnified pane beside it showing the area under the lens, plus thumbnails to switch images. Use it for products where texture and fine detail sell, like fabrics, watches or jewelry.
Product Gallery 2 is a free product gallery block for React, built on shadcn/ui and Tailwind CSS. It ships as 89 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.
- gallery
- zoom
- lens
- magnifier
- hover
- product
- detail
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/product-gallery-02Dependencies installed automatically: lucide-react.
Uses: reveal, utils.
Usage
import ProductGallery02 from "@/components/blocks/product-gallery-02"
export default function Page() {
return <ProductGallery02 />
}