---
title: Frame
description: Wrap images and demos in a styled bordered container with optional captions. Makes screenshots stand out.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
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
```mdx
```
## Basic Frame
```mdx
```
## With Caption
Add a caption below the frame:
```mdx
```
## 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
Optional text below the frame.
## What's Next?
Browse all available components
Learn how to use components in MDX