# Frames
Use frames to present screenshots, media, and browser-like previews with captions.
Source: /docs/components/frames
Last modified: 2026-06-20
Frames give visual material a clear boundary without turning the whole page into cards.

## Basic example


  <div class="p-5 text-sm text-neutral-600">
    <strong class="text-neutral-950">Offer preview</strong>
    This placeholder represents a real product screenshot or live iframe.
  </div>


```mdx title="frame-example.mdx"

  ![Plandalf API docs screenshot](/images/stacks/api-first/numi-api-docs.png)


```

## Variants

Use the browser variant when the image represents a page, app surface, or live preview. Use the flat variant when the media already has its own strong boundary.


  <div class="grid gap-3 p-5 text-sm">
    <div class="h-3 w-28 rounded bg-neutral-200"></div>
    <div class="rounded-lg border border-neutral-200 bg-white p-4">
      <div class="h-3 w-36 rounded bg-primary-100"></div>
      <div class="mt-3 h-2 w-full rounded bg-neutral-100"></div>
      <div class="mt-2 h-2 w-3/4 rounded bg-neutral-100"></div>
    </div>
  </div>


  <div class="grid grid-cols-3 gap-2 p-4 text-center text-xs font-medium text-neutral-600">
    <div class="rounded-md border border-neutral-200 bg-neutral-50 p-3">Offer</div>
    <div class="rounded-md border border-primary-200 bg-primary-50 p-3 text-primary-800">Checkout</div>
    <div class="rounded-md border border-emerald-200 bg-emerald-50 p-3 text-emerald-800">Automation</div>
  </div>


```mdx title="frame-variants.mdx"

  ![Plandalf offer preview](/path/to/product-screenshot.png)


```mermaid
 Checkout --> Automation
  `} />


```

## Captions and hints

Captions sit below the frame. Hints sit above the frame. Like Mintlify, Plandalf supports inline Markdown in captions and hints, including links, bold text, italics, and inline code.


  <div class="grid gap-3 p-5 text-sm text-neutral-600">
    <div class="rounded-lg border border-neutral-200 bg-white p-4">
      <strong class="text-neutral-950">API reference preview</strong>
      Use linked captions when the frame points to a deeper implementation page.
    </div>
  </div>


  <div class="grid gap-2 p-5 text-sm text-neutral-600">
    <div class="rounded-md border border-primary-200 bg-primary-50 p-3 text-primary-900">Test offer</div>
    <div class="rounded-md border border-neutral-200 bg-white p-3">Production checklist</div>
  </div>


```mdx title="frame-markdown-captions.mdx"

  ![Plandalf API reference preview](/path/to/product-screenshot.png)


  ![Plandalf checkout preview](/path/to/product-screenshot.png)


```

## Media rules


### Frame usage


- `Screenshots` (real product UI):
    Docs frames should contain real product screenshots, captured app states, or live examples. Avoid decorative fake UI.


- `Captions` (specific and useful):
    Explain what the reader is seeing, not just the component name.


- `Hints` (short context above media):
    Use `hint` for one-line context before the screenshot, such as environment, account state, or prerequisite.


## Videos

Frames can hold videos as well as images and iframes. When a `video` has `autoPlay`, the frame enhancer adds `playsInline`, `loop`, and `muted` so the embed behaves like Mintlify's video frame pattern.


```mdx title="frame-video.mdx"


```

## Properties


- `caption` (string):
  Text shown below the frame. Supports inline Markdown formatting including links, bold text, italics, and code.


- `hint` (string):
  Text that appears before the frame.


## Plandalf extensions


- `variant` (default | flat | browser; default: default):
  Browser adds a small top chrome. Flat avoids double borders around media that already has its own boundary.


- `align` (center | stretch; default: center):
  Controls frame width behavior.


- `class | className` (string):
  Optional utility classes for local spacing or sizing.


## Related


  - [Images and visual context](/docs/components/visual-context): Use real screenshots and diagrams.
  - [Color](/docs/components/color): Show palette values.
  - [Tree](/docs/components/tree): Show file structures.