> ## Documentation Index
> [HTML page](https://blode.md/docs/components/frame)
> [Documentation index](https://blode.md/docs/llms.txt)
> Use the index to discover all available pages before exploring further.

# Frame

Wrap screenshots, diagrams, and media in a Frame with an optional caption to separate visuals from body copy in your documentation pages.

Use the `Frame` component to visually set apart screenshots, diagrams, or other media with a bordered container and an optional caption.

Reach for `Frame` when a screenshot or diagram needs more visual weight than an inline image. Product walkthroughs, dashboard tours, and configuration guides benefit from a bordered container that separates the visual from surrounding prose. Add a `caption` to explain what the reader should notice, or a `hint` when the image is clickable or opens in a lightbox-style view in your theme.

On a feature page, write the steps in prose, drop in a `Frame` with the relevant UI screenshot, then continue with the next section. Captions work well for before-and-after comparisons or calling out a specific control in a busy dashboard.

## Basic frame

```mdx
<Frame>![Dashboard overview](/images/dashboard.png)</Frame>
```

## With a caption

Add a `caption` prop to display centered text below the frame:

```mdx
<Frame caption="The project dashboard shows recent deployments and page analytics.">
  ![Dashboard overview](/images/dashboard.png)
</Frame>
```

A placeholder for a screenshot or diagram.

Caption: The project dashboard shows recent deployments and page analytics.

## With a hint

Use the `hint` prop to display helper text above the frame:

```mdx
<Frame hint="Click to enlarge" caption="Navigation configuration in docs.json">
  ![Navigation config](/images/nav-config.png)
</Frame>
```

Click to enlarge

A placeholder for a screenshot or diagram.

Caption: Navigation configuration in docs.json

## Props

- `caption` (type: string, required: false): Text displayed below the frame as a figcaption.
- `hint` (type: string, required: false): Helper text displayed above the frame.
- `children` (type: ReactNode, required: true): Content rendered inside the bordered container.

## Related pages

- [Callout](/components/callout) -- highlight tips or warnings alongside screenshots
- [Card](/components/card) -- link to related feature pages from visual sections
- [Code blocks](/content/code-blocks) -- show configuration snippets next to UI screenshots