Frame

Use Frame to visually contain media or custom content with optional hints and captions.

Basic usage#

<Frame caption="Docs layout preview">
  <img src="/images/sample.jpg" alt="Sample" />
</Frame>

Image sizing#

Images are centered at their natural size, or at the dimensions specified on the image. They scale down to fit narrower screens without stretching to fill the frame. Multiple images stack vertically with space between them.

Use width to display an image smaller than its source:

<Frame caption="A preview limited to 320 pixels wide">
  <img src="/images/sample.jpg" width={320} alt="Small docs layout preview" />
</Frame>

Markdown captions#

Caption strings support Markdown links, bold, italic, and inline code.

<Frame caption="**Sample:** Learn more in the [images guide](/docs/images).">
  <img src="/images/sample.jpg" alt="Sample" />
</Frame>

Hints#

Use hint to display text before the frame. You can combine it with a caption.

Use a high-resolution source image.

<Frame hint="Use a high-resolution source image." caption="Docs layout preview">
  <img src="/images/sample.jpg" alt="Sample" />
</Frame>

Autoplay videos#

Videos with autoPlay automatically receive playsInline, loop, and muted attributes. Videos without autoPlay are left unchanged.

<Frame caption="Product demo">
  <video autoPlay src="/videos/product-demo.mp4" />
</Frame>

With code or other children#

<Frame caption="Environment variables in `.env`">
  <code>VITE_API_URL=https://api.example.com</code>
</Frame>

Properties#