Image Viewer renders images in standard or overlay modes with desktop and mobile breakpoints and RTL support.
Loading demo: image-viewer-real-world
npx sdaia-ui@latest add image-viewer
import { ImageViewer } from "@/components/ui/image-viewer"<ImageViewer type="standard" mobile={false} />Full-featured image viewer with navigation controls.
Loading demo: image-viewer-standard
Image viewer displayed as a fullscreen overlay on top of the page.
Loading demo: image-viewer-overlay
Image viewer optimised for mobile screens with touch-friendly controls.
Loading demo: image-viewer-mobile
Props for the Image Viewer (MediaViewer) component.
Prop | Type | Default | Required |
|---|---|---|---|
src | string | — | optional |
alt | string | — | optional |
filename | string | — | optional |
size | 'sm' | 'md' | 'lg' | 'lg' | optional |
checked | boolean | — | optional |
onCheckedChange | (checked: boolean) => void | — | optional |
onDelete | () => void | — | optional |
onPreview | () => void | — | optional |
previewLabel | string | 'Preview' | optional |
forceHover | boolean | false | optional |