Prism

Homecomponentsinformational

This component is in development. There could be breaking changes made to it in a non-major release of Prism. Please use with caution.

Use MediaPreview to overlay media previews on the current page in a modal dialog.

Use currentIndex to set the media that should be previewed when opened.

Use sidebar to set the sidebar data.

Use the unoptimized property to disable Next.js image optimization.

medias

Required

A set of media elements.

Media[]

open

Opens preview if true.

true

false

onClose

Callback that executes when preview closes.

(() => void)

trigger

An optional trigger that opens the preview.

ReactNode

currentIndex

The index of the currently previewed media.

number

unoptimized

Disable next/image optimization.

true

false

sidebar

Sidebar properties.

{ title: string; content: ReactNode; }