Skip to content
Blode.md

AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.

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

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

With a caption

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

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

A placeholder for a screenshot or diagram.

The project dashboard shows recent deployments and page analytics.

With a hint

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

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

Navigation configuration in docs.json

Props

FieldTypeDescriptionRequired
captionstringText displayed below the frame as a figcaption.Optional
hintstringHelper text displayed above the frame.Optional
childrenReactNodeContent rendered inside the bordered container.Yes