ImageViewer

Preview images or videos at page level with previous, next, and close controls.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use ImageViewer to enlarge images and navigate a group. Use Image for ordinary in-page display. Reuse the existing zoom, close, and keyboard interactions rather than rebuilding them.

Omit open, items, and index together for page-wide automatic mode. In manual mode, provide the preview list and current item explicitly.
children replaces every default control Button. Use parts when only changing their appearance so close and previous/next controls remain available.

Import

import { ImageViewer } from '@snowui-design-system/components';

Usage

Backdrop — opaque

Backdrop — blur

Backdrop — transparent

Close button

Starting image

Control appearance

Custom controls

API Reference

Property	Type	Default	Example	Description
`open`	`boolean`	`—`	`open`	Control viewer visibility in manual mode. Omit together with items and index for page-wide automatic mode.
`items`	`ImageViewerItem[]`	`—`	`items={items}`	Preview items in manual mode. When omitted, consumes page-wide preview state automatically.
`index`	`number`	`—`	`index={42}`	Current displayed item index in manual mode. When omitted, consumes page-wide preview state automatically.
`dismissMode`	`"button" \| "backdrop"`	`"backdrop"`	`dismissMode="button"`	Closing policy. backdrop hides the close Button and allows clicking empty space outside the media to close. button shows the close Button and disables empty-space dismissal.
`backdrop`	`BackdropVariant`	`"opaque"`	`backdrop={value}`	Shared Dialog backdrop appearance: opaque uses 10% black, blur adds background blur, and transparent has no tint. Does not change closing policy.
`children`	`Snippet`	`—`	`<ImageViewer>Content</ImageViewer>`	Explicit control Buttons. When present, replaces every default built-in control.
`parts`	`ComponentPartsOf<{ Button: typeof Button }>`	`—`	`parts={partsOptions}`	Bulk configuration for generated previous, next, and close Buttons.