WritedocsWritedocs

Frame

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code

Frame puts a border and rounded corners around what’s inside it - an image, a video, an embed, any HTML - with an optional caption. Unlike Image, it has no src of its own: it frames what you put in it.

The dashboard's home screen
The dashboard's home screen
<Frame caption="The dashboard's home screen">
  <img src="/images/card-demo.svg" alt="The dashboard's home screen" />
</Frame>

A Markdown image

The dashboard's home screen

<Frame>
  ![The dashboard's home screen](/images/card-demo.svg)
</Frame>

Hint

hint adds a line above the content, inside the frame - to say what to look at:

Click New key at the top right.

The API keys page
The API keys page
<Frame hint="Click New key at the top right." caption="The API keys page">
  <img src="/images/card-demo.svg" alt="The API keys page" />
</Frame>

An embed

An embedded video
<Frame caption="An embedded video">
  <iframe width="100%" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="An embedded video" allowFullScreen />
</Frame>

Props

caption string

Text under the content, inside the frame.

hint string

A line above the content, inside the frame.