> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Frame

Wrap content in a bordered container with an optional caption.

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

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