Frame

Bordered, padded wrapper for screenshots and media — with optional caption.

Installation

npx nimbus-docs add frame

yarn dlx nimbus-docs add frame

pnpm dlx nimbus-docs add frame

bunx nimbus-docs add frame

Preview

The Nimbus showcase page

<Frame caption="The Nimbus showcase page">
<img src="/assets/showcase.png" alt="Screenshot of the component showcase page" />
</Frame>

Examples

Aspect ratio

Lock the frame to a fixed ratio. Common choices: 16/9 (video), 4/3 (classic), 1/1 (square), 21/9 (ultrawide).

16 / 9

4 / 3

1 / 1

21 / 9

<Frame aspect="16/9" caption="16 / 9">
<img src="/assets/hero.png" alt="Hero" />
</Frame>

<Frame aspect="4/3" caption="4 / 3">
<img src="/assets/screenshot.png" alt="Screenshot" />
</Frame>

<Frame aspect="1/1" caption="1 / 1">
<img src="/assets/avatar.png" alt="Avatar" />
</Frame>

<Frame aspect="21/9" caption="21 / 9">
<img src="/assets/banner.png" alt="Banner" />
</Frame>

API reference

Every prop the component accepts, sourced from a single declaration.

Prop	Type
`caption`	`string`
`aspect`	`string`