Frame

Styled <figure> wrapper for screenshots, diagrams, and embedded videos — with optional caption and muted hint. Keeps visual assets consistent across the site.

<Frame> wraps an image, diagram, or <video> in a semantic <figure> with a subtle border and optional captions. Use it for screenshots, UI references, architecture diagrams — anywhere you want a visual asset to feel “framed” rather than bleeding into prose.

Plain frame

import { Frame } from '@publier/shell/components';

<Frame>
  <img src="/logo.svg" alt="Publier logo" />
</Frame>

With caption

Publier logo mark

<Frame caption="Publier logo mark">
  <img src="/logo.svg" alt="Publier logo" />
</Frame>

With caption + hint

The hint renders in a smaller muted style below the caption — good for “shown in light mode” or “taken at 1440px” notes:

Publier logo mark Primary brand asset — matches the favicon.

<Frame caption="Publier logo mark" hint="Primary brand asset — matches the favicon.">
  <img src="/logo.svg" alt="Publier logo" />
</Frame>

Video

Pass video to apply video-specific aspect-ratio styling:

<Frame video caption="Publier scaffolder walkthrough">
  <video src="/demo.mp4" controls autoplay muted loop />
</Frame>

Props

Prop	Type	Default	Description
`caption`	`string`	—	Visible caption below the frame.
`hint`	`string`	—	Smaller muted line rendered after the caption.
`video`	`boolean`	`false`	Applies a video-aspect-ratio modifier class.

Children render inside the frame’s content slot — place the <img>, <video>, or embedded SVG there.

Behaviour

Renders as <figure> with the image/video as its child and an optional <figcaption>.
Zero JavaScript.
Border and spacing pull from daisyUI’s --color-base-300 and adapt to every theme.

Click-to-zoom image lightbox → ImageZoom.
Blur-up lazy image loading → BlurImage.
Inline icons (not full images) → Icons.