Get PrimeUI
ComponentsMedia

Gallery

Gallery is an image viewer with zoom, rotate, flip and download capabilities.

image-1
image-2
image-3
image-4
image-5
image-6
image-7
image-8
image-9
image-10
image-11
image-12
image-13
image-14
image-15
image-16
image-17
image-18
image-19
image-20
image-21
image-22
image-23
image-24
image-25
image-26
image-27
image-28
image-29
image-30
PREVIEW

Usage #

Examples #

Basic #

Displays a collection of images with a lightbox viewer.

image-1
image-2
image-3
image-4
image-5
basic-demo

Toolbar #

Add a GalleryHeader with action sub-components like GalleryRotateLeft, GalleryZoomIn, GalleryDownload, and GalleryFullScreen to expose image controls.

image-1
image-2
image-3
image-4
image-5
toolbar-demo

Thumbnails #

Add a GalleryFooter with GalleryThumbnail to render a thumbnail strip for quick navigation.

image-1
image-2
image-3
image-4
image-5
image-6
image-7
image-8
image-9
image-10
image-11
image-12
image-13
image-14
image-15
image-16
image-17
image-18
image-19
image-20
image-21
image-22
image-23
image-24
image-25
image-26
image-27
image-28
image-29
image-30
thumbnails-demo

Single #

Click on the image to open it in a fullscreen dialog without thumbnails or navigation buttons.

image
single-demo

Grid #

Gallery can be used as a lightbox by combining it with a grid of thumbnails. Click on an image to open the gallery in fullscreen mode.

image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
grid-demo

Accessibility #

Screen Reader

Gallery uses semantic button elements for all interactive controls. Use aria-label attributes on buttons to provide accessible names.

Keyboard Support

KeyFunction
tabMoves focus between interactive elements.
enterActivates the focused button (zoom, rotate, flip, navigate, etc.).
spaceActivates the focused button.
Resources
On this page
Usage1/8
Theme Designer
PrimeVue 5.0.2 by PrimeUI
©2026 PrimeTek