Lightbox

Full-screen image and video viewer with zoom, keyboard navigation, fullscreen, download, share, thumbnails, and a slide counter. Highly slot-driven for custom chrome.

Default

Pass an array of images and render thumbnails that open the lightbox.

Usage

Import the parts you need from the component's folder.

import {
  Lightbox,
  LightboxBody,
  LightboxContent,
  LightboxCaption,
  LightboxClose,
  LightboxCounter,
  LightboxDownload,
  LightboxFullscreen,
} from "@/components/ui/lightbox";

Custom trigger

Use the #trigger scoped slot to open the lightbox from any element. Receives { open, openAt, items }.

Mixed image + video

Items can be images or { type: 'video', src, poster }. Videos auto-pause on slide change.

Minimal chrome

Hide the thumbnail strip, counter, and download button for a bare viewer.

API Reference

Lightbox

Prop	Type	Default	Description
`items`	`LightboxItem[]`	`[]`	Slides to display (image or video objects).
`open`	`boolean`	`false`	Open state. Supports v-model:open.
`index`	`number`	`0`	Active slide index. Supports v-model:index.
`loop`	`boolean`	`true`	Wrap around at the ends.
`limit`	`number \| null`	`null`	Cap how many thumbnails the built-in grid renders.
`showThumbnails`	`boolean`	`true`	Show the thumbnail strip.
`showCounter`	`boolean`	`true`	Show the n / total counter.
`showFullscreen`	`boolean`	`false`	Show the fullscreen toggle.
`showShare`	`boolean`	`false`	Show the share button.
`zoomable`	`boolean`	`true`	Allow zoom on the active image.
`keyboard`	`boolean`	`true`	Enable arrow-key and Escape navigation.

Event	Description
`update:open`	Fires when the viewer opens or closes. Enables v-model:open.
`update:index`	Fires when the active slide changes. Enables v-model:index.
`change`	Fires on slide change. Receives { index, item }.
`download`	Fires when a slide is downloaded. Receives { index, item }.

Slot	Description
`trigger`	Scoped slot for the opener. Receives { open, openAt, items }.
`counter`	Override the n / total counter.
`actions`	Override the action toolbar (download, share, fullscreen, close).
`previous`	Override the previous-slide control.
`next`	Override the next-slide control.
`caption`	Scoped slot for the caption. Receives { caption, item }.
`thumbnails`	Override the thumbnail strip.

Sub-components (LightboxContent, LightboxImage, LightboxVideo, LightboxClose, LightboxCounter, LightboxNext, LightboxPrevious, LightboxThumbnails, ...)

Prop	Type	Default	Description
`class`	`string`	—	Building blocks used internally and available for fully custom layouts. Each reads shared state from the Lightbox provider. See the component source for per-part props.

Hover Card Popover