> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.manicule.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For every page in one file, fetch https://mintlify.manicule.dev/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://mintlify.manicule.dev/api/mcp.
> Every agent surface: https://mintlify.manicule.dev/.well-known/llms-manifest.json

# Frames (/components/frames)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 894 · updated: 2026-07-31 -->
Related: [Accordions](/components/accordions.md), [Badge](/components/badge.md), [Banner](/components/banner.md), [Callouts](/components/callouts.md), [Cards](/components/cards.md), [Code groups](/components/code-groups.md)

> 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.

<Frame>
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park." />
</Frame>

## Captions

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

<Frame caption="Yosemite National Park is visited by over 3.5 million people every year.">
  <img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="Photograph of Yosemite Valley." />
</Frame>

### Markdown in captions

Captions support Markdown formatting, including links and bold text.

<Frame caption="Learn more about [Yosemite National Park](https://www.nps.gov/yose/index.htm) and plan your visit.">
  <img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="Photograph of Yosemite Valley." />
</Frame>

<Frame caption="**Important:** Check the [park website](https://www.nps.gov/yose/index.htm) for current conditions.">
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park." />
</Frame>

## Hints

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

<Frame hint="If you plan to visit Yosemite National Park, secure your permits before you go." caption="Yosemite National Park is visited by over 3.5 million people every year.">
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park." />
</Frame>

## Videos

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

```mdx title="Video with autoPlay"
<Frame caption="Product demo">
  <video autoPlay src="/path/to/video.mp4" />
</Frame>
```

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

## Properties

<ResponseField name="caption" type="string">Text that appears as part of the frame, centered below the content. Supports Markdown formatting including links and bold text.</ResponseField>

<ResponseField name="hint" type="string">Text that precedes the frame.</ResponseField>

<CodeGroup>
```mdx title="Frame"
<Frame>
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>
```

```mdx title="Frame with a caption"
<Frame caption="Caption text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>
```

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

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

```mdx title="Frame with a hint"
<Frame hint="Hint text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>
```

```mdx title="Frame with both hint and caption"
<Frame hint="Hint text" caption="Caption text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>
```
</CodeGroup>