# Frame

URL: https://ark-ui.com/docs/utilities/frame
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/utilities/frame.mdx

Used to render a component in an iframe

---

<ComponentPreview id="Frame" />

## Usage

The `Frame` component is used to render a component in an iframe.

- Tracks the size of the content and exposes them via css variables.
- Support for `head` prop to inject scripts and styles.
- Support for mount and unmount callbacks.

```jsx
import { Frame } from '@ark-ui/react'
```

## Examples

### Basic

Wrap your component in the `Frame` component to render it in an iframe.

<Example component="frame" id="basic" />

### Injecting Script

Using the `onMount` prop, you can inject a script into the iframe.

<Example component="frame" id="script" />

### Custom src doc

Use the `srcDoc` prop to specify the HTML content of the page to use in the iframe.

<Example component="frame" id="src-doc" />

## API Reference

### Props

**Component API Reference**

#### React

**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `head` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No | Additional content to be inserted into the frame's <head> |
| `onMount` | `() => void` | No | Callback function to be executed when the frame is mounted |
| `onUnmount` | `() => void` | No | Callback function to be executed when the frame is unmounted |


#### Solid

**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `head` | `number | boolean | Node | ArrayElement | (string & {})` | No | Additional content to be inserted into the frame's <head> |
| `onMount` | `() => void` | No | Callback function to be executed when the frame is mounted |
| `onUnmount` | `() => void` | No | Callback function to be executed when the frame is unmounted |


#### Vue

**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `head` | `VNode<RendererNode, RendererElement, { [key: string]: any; }> | VNode<RendererNode, RendererElement, { ...; }>[]` | No |  |
| `srcDoc` | `string` | No |  |


#### Svelte

**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `head` | `Snippet<[]>` | No | Additional content to be inserted into the frame's <head> |
| `onMount` | `() => void` | No | Callback function to be executed when the frame is mounted |
| `onUnmount` | `() => void` | No | Callback function to be executed when the frame is unmounted |
| `ref` | `HTMLIFrameElement` | No | The bindable ref of the iframe |
| `srcdoc` | `string` | No | The source document to be displayed in the frame |
