Frame

Frame wraps images and demos in a bordered container with optional captions.

Use Frame when you want to:

• Give screenshots and UI images a finished look
• Add captions to explain what readers are seeing
• Distinguish demo output from regular content
• Keep visuals consistent across your docs

Usage

<Frame caption="Architecture diagram">

  ![Diagram](/images/city-skyline.jpg)

</Frame>

Basic Frame

<Frame>

  ![City skyline](/images/city-skyline.webp)

</Frame>

With Caption

Add a caption below the frame:

<Frame caption="New York City at dusk">

  ![City skyline](/images/city-skyline.webp)

</Frame>

Framing Other Content

Frame takes any content, not only images:

✓ Build completed successfully
✓ 42 pages generated
✓ Deployed to production

When NOT to Use Frame

• Inline decorative images: regular Markdown images are fine for illustrations
• Icons or small graphics: Frame adds unneeded visual weight
• Images that flow with text: Frame creates a visual break. Use it for standalone visuals

Best Practices

• Keep captions concise: one sentence that explains what the reader is seeing
• Use consistently: if you frame one screenshot, frame every screenshot
• Don't over-frame: reserve frames for important visuals, not every image on the page

Props

What's Next?