Frame
Embed external content using iframes
The Frame component embeds external content securely using iframes.
Usage
mdx
1<Frame 2 src="https://example.com/embed" 3 title="Embedded Content"4 height={400}5/>Live Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | required | URL of the content to embed |
title | string | "Embedded content" | Accessible title for the iframe |
height | number | string | 500 | Height of the iframe |
width | string | "100%" | Width of the iframe |
Security
Warning
The Frame component uses a sandboxed iframe with limited permissions for security. Allowed features include: `allow-scripts`, `allow-same-origin`, `allow-forms`, and `allow-popups`.
Common Use Cases
- Embedding maps (Google Maps, OpenStreetMap)
- Interactive demos and playgrounds
- Third-party widgets
- Code sandboxes (CodeSandbox, StackBlitz)
Example: CodeSandbox Embed
mdx
1<Frame 2 src="https://codesandbox.io/embed/new?codemirror=1"3 title="CodeSandbox"4 height={500}5/>