Frames

Wrap images, videos, and other components with the frame component to add styled borders, captions, and visual emphasis to your content.

Use frames to display images, diagrams, videos, or other visual content with consistent styling and optional captions. Frames center content and provide visual separation from surrounding text.

Add additional context to an image using the optional caption prop. Captions appear in the frame below the image.

Captions support Markdown formatting, including links and bold text.

Add text that precedes the frame using the optional hint prop. Hints appear before the frame.

When you place a video element with autoPlay inside a frame, the frame adds playsInline, loop, and muted attributes.

<Frame caption="Product demo">
  <video autoPlay src="/path/to/video.mp4" />
</Frame>

Videos without autoPlay do not have any additional attributes added by default.

• caption (string) — Text that appears as part of the frame, centered below the content. Supports Markdown formatting including links and bold text.

• hint (string) — Text that precedes the frame.

• className (string) — Additional CSS classes to apply to the frame.

<Frame>
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame caption="Caption text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame caption="Visit the [documentation](/docs) for more details">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame caption="**Note:** See the [official guide](https://example.com) for setup instructions">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame hint="Hint text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame hint="Hint text" caption="Caption text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

• Pages
• Components overview
• Mintlify MDX extension