Basic Frame

Use Frame with a plain image:

The beautiful Mount Fuji reflected in Lake Kawaguchi during autumn. 
<Frame>

  <img

    src="https://img.freepik.com/free-photo/autumn-season-mountain-fuji-kawaguchiko-lake-japan_335224-95.jpg"

    alt="The beautiful Mount Fuji reflected in Lake Kawaguchi during autumn."

  />

</Frame>

Frame with Caption

Add a caption for context:

The beautiful Mount Fuji reflected in Lake Kawaguchi during autumn.

Mount Fuji reflected in Lake Kawaguchi during autumn.

<Frame caption="Caption text">

  <img

    src="https://img.freepik.com/free-photo/autumn-season-mountain-fuji-kawaguchiko-lake-japan_335224-95.jpg"

    alt="The beautiful Mount Fuji reflected in Lake Kawaguchi during autumn."

  />

</Frame>

Caption with Markdown

The caption prop supports markdown:

The beautiful Mount Fuji reflected in Lake Kawaguchi during autumn.

See the documentation for caption formatting details.

<Frame caption="Visit the [documentation](/components/markdown) for more details">

  <img

    src="https://img.freepik.com/free-photo/autumn-season-mountain-fuji-kawaguchiko-lake-japan_335224-95.jpg"

    alt="The beautiful Mount Fuji reflected in Lake Kawaguchi during autumn."

  />

</Frame>

Multiple Frames

Use multiple frames to compare visuals:

Photograph of Yellowstone National Park.

Mount Fuji at Sunrise

Photograph of Yosemite Valley.

Lake Kawaguchi in Autumn

Available Options

caption
string

Optional caption rendered below the framed content. Supports markdown.

Non-Image Content (Optional)

You can also frame diagrams:

graph TB
    Client[Client App]
    Gateway[API Gateway]
    Auth[Auth Service]
    Users[User Service]
    Orders[Order Service]
    DB[(Database)]

    Client --> Gateway
    Gateway --> Auth
    Gateway --> Users
    Gateway --> Orders
    Users --> DB
    Orders --> DB

Microservices architecture overview

sequenceDiagram
    User->>App: Enter credentials
    App->>Auth: Validate user
    Auth-->>App: Return token
    App-->>User: Login success

Authentication flow

Best Practices

Use with visuals

Frame works well with screenshots, photos, and diagrams.

Always add alt text

Use meaningful image alt text so visuals remain accessible.

Keep captions concise

Keep captions short and descriptive. Put long explanations in surrounding content.

Optimize image sizes

Use appropriately sized images to keep page load times fast.

Full Image