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
• Create visual consistency across your documentation

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 works with any content, not just 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 unnecessary visual weight
• Images that flow with text - Frame creates a visual break; use 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 all screenshots for visual consistency
• Don't over-frame - Reserve frames for important visuals, not every image on the page

Props

What's Next?