Media | Components

<Media> frames an image or a video with a shadow and an optional caption, and fades it in when the slide appears. It is available in .mdx stories.

Live demo

Click the deck, then use ← → · 1 slide · 00:00Open fullscreen →

Syntax

MDX
import photo from "./photo.svg"

--- layout=center

<Media
  src={photo}
  alt="Purple gradient"
  caption="Lorem ipsum dolor sit amet"
/>

MDX (video)
<Media type="video" src="/lorem.mp4" caption="Lorem ipsum" />

Attributes and props

Prop	Type	Default	Description
`src`	`string`	—	Image or video URL
`alt`	`string`	`"Illustration"`	Alternative text of the image
`caption`	`string`	—	Text shown under the media
`type`	`image \| video`	`image`	A video gets native controls
`className`	`string`	—	Extra CSS classes

In other formats

Format	Status	Notes
`deck`	Available	Rendered in slides, the presenter console and the HTML and PDF exports.
`docs`	Available	Through <StoryEmbed slug="…" /> in any page of a site.
`motion`	Available	Animated block in a film.
`report`	Planned · P6	Section of a paged report.
`toon`	Planned · P7	Panel of a vertical strip.
`book`	Planned · P8	Block of a printable chapter.

Last modified on October 29, 2026