Product Gallery

A premium, responsive product gallery component featuring thumbnail navigation, hover-to-zoom capabilities, and video support.

Pro

Product Gallery — part of Base UI Pro

Unlock it plus 89 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Thumbnails on Left

HTML

Thumbnails on Bottom

HTML

Thumbnails on Right

HTML

Thumbnails on Top

HTML

How to Use

The Product Gallery component provides a robust layout for showcasing product imagery. Drop in a <base-product-gallery> element and configure your aspect ratio padding, thumbnail alignment, and zoom interactions natively.

HTML

Define your gallery footprint array in TypeScript mapping the layout payload:

TypeScript

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add product-gallery

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add product-gallery
// Paths are relative to aliases.components (default: src/app/components)
import { GalleryItem, ProductGalleryComponent } from './product-gallery/product-gallery.component';

@Component({
  selector: 'app-your-component',
  imports: [
    ProductGalleryComponent
  ],
  template: `...`
})
export class YourComponent {}

API for product-gallery — generated from JSDoc in the library source.

API reference for product-gallery
API	Member	Type	Default	Description
`GalleryItem`	`id`	`string \| number`	—	Optional unique identifier for the item.
`GalleryItem`	`src`	`string`	—	The source URL of the main image or video.
`GalleryItem`	`thumbSrc`	`string`	—	The source URL of the thumbnail image. Defaults to `src` if not provided.
`GalleryItem`	`alt`	`string`	—	Alternative text for accessibility.
`GalleryItem`	`type`	`'image' \| 'video'`	—	Media type, either 'image' or 'video'. Defaults to 'image'.
`base-product-gallery`	`class`	`string`	`''`	Additional CSS classes to merge into the host element.
`base-product-gallery`	`galleryLabel`	`unknown`	`'Product gallery'`	Accessible label for the product gallery carousel region.
`base-product-gallery`	`items`	`GalleryItem[]`	`[]`	The array of media items to display in the gallery.
`base-product-gallery`	`thumbnailsPosition`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'left'`	Position of the thumbnails strip relative to the main viewer. Defaults to 'left'.
`base-product-gallery`	`showArrows`	`boolean`	`true`	Whether to show previous/next navigation arrows on the main viewer.
`base-product-gallery`	`objectFit`	`'cover' \| 'contain'`	`'cover'`	CSS object-fit rule for the main image ('cover' or 'contain').
`base-product-gallery`	`zoomOnClick`	`boolean`	`true`	Enables an interactive magnifying zoom effect when clicking the main image.
`base-product-gallery`	`aspectRatio`	`string`	`'16/9'`	Aspect ratio constraint for the main viewer (e.g., '16/9' or '1/1').
`base-product-gallery`	`mainViewWidth`	`string`	`'100%'`	Width of the main view container. Defaults to '100%'.
`base-product-gallery`	`mainViewHeight`	`string`	`'auto'`	Height of the main view container. Defaults to 'auto'.
`base-product-gallery`	`(indexChange)`	`number`	—	Emitted whenever the active selected item changes.

Base UI (Angular) — base-ui.net — is a CLI-first Angular + Tailwind CSS component library with 208 components and blocks (119 free), delivered shadcn-style: npx base-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).