Frames

Add visual emphasis with styled frames around images and other components.

Use frames to display images, diagrams, or other visual content with consistent styling and optional captions. Frames center content and provide visual separation from surrounding text.

Captions

Add additional context to an image using the optional caption prop. Captions appear in the frame below the image.

Yosemite National Park is visited by over 3.5 million people every year.

Markdown in captions

Captions support markdown formatting, including links and bold text.

Learn more about Yosemite National Park and plan your visit.

Important: Check the park website for current conditions.

Hints

Add text that precedes the frame using the optional hint prop. Hints appear above the frame.

If you plan to visit Yosemite National Park, secure your permits before you go.

Yosemite National Park is visited by over 3.5 million people every year.

Properties

caption · string

Text that appears as part of the frame, centered below the content. Supports markdown formatting including links and bold text.

hint · string

Text that precedes the frame.

Frame

<Frame>
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame caption="Caption text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame caption="Visit the [documentation](/docs) for more details">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame caption="**Note:** See the [official guide](https://example.com) for setup instructions">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame hint="Hint text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame hint="Hint text" caption="Caption text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>