Components

Frame

Styled borders, hints, and captions for screenshots or other media.

Use Frame to visually contain media or custom content with optional hints and captions.

Basic usage#

<Frame caption="Docs layout preview">
  <img src="/images/sample.jpg" alt="Sample" />
</Frame>

Caption strings support Markdown links, bold, italic, and inline code.

<Frame caption="**Sample:** Learn more in the [images guide](/docs/images).">
  <img src="/images/sample.jpg" alt="Sample" />
</Frame>

Use hint to display text before the frame. You can combine it with a caption.

Use a high-resolution source image.

<Frame hint="Use a high-resolution source image." caption="Docs layout preview">
  <img src="/images/sample.jpg" alt="Sample" />
</Frame>

Videos with autoPlay automatically receive playsInline, loop, and muted attributes. Videos without autoPlay are left unchanged.

<Frame caption="Product demo">
  <video autoPlay src="/videos/product-demo.mp4" />
</Frame>

VITE_API_URL=https://api.example.com

Environment variables in .env

<Frame caption="Environment variables in `.env`">
  <code>VITE_API_URL=https://api.example.com</code>
</Frame>

Name	Type	Description
caption	ReactNode	Optional centered caption below the framed content. String values support inline Markdown.
hint	ReactNode	Optional text displayed before the frame. String values support inline Markdown.
children	ReactNode	Media or other content to frame.

Last updated on Aug 8, 2026