Media Viewer
A full-screen media viewer with zoom controls, image/prototype tabs, annotation pins, inline comments, a resizable details panel, and an optional GSAP open/close transition.
Installation
npx shadcn add @adv/media-viewerUsage
import MediaViewer from '@/components/mediaViewer';
import type { MediaData } from '@/components/mediaViewer/types';
const images: MediaData[] = [
{
id: 'img-1',
src: '/my-image.png',
alt: 'My image',
metadata: {
filename: 'my-image.png',
size: '120 KB',
dimensions: '1920 × 1080',
uploadDate: '2026-05-27',
tags: ['design', 'ui'],
},
relationships: [],
links: { figma: 'https://figma.com/...' },
comments: [],
},
];
export default function Page() {
const [isOpen, setIsOpen] = useState(false);
const [currentIndex, setCurrentIndex] = useState(0);
return (
<>
<button onClick={() => setIsOpen(true)}>View</button>
<MediaViewer
images={images}
currentIndex={currentIndex}
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onNavigate={setCurrentIndex}
/>
</>
);
}Example
Click to open a full-screen media viewer with 2 images, zoom controls, annotations, and a resizable details panel.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | MediaData[] | — | Array of media items to display. Must contain at least one item. |
currentIndex | number | — | Index of the currently displayed image. Controlled by the parent. |
isOpen | boolean | — | Whether the viewer dialog is open. |
onClose | () => void | — | Called when the user closes the viewer (X button, ESC, or overlay click). |
onNavigate | (index: number) => void | — | Called when the user navigates to a different image (arrows or keyboard). |
useAnimation | boolean | false | Enables GSAP open/close transition. Set true when triggered from a card with a ref. |