Screenshot

Display screenshots with optional browser chrome decoration.

Usage

mdx

<Screenshot
  src="/screenshot.png"
  alt="dashboard view"
  caption="the main dashboard"
/>

mdx

<Screenshot src="/image.png" alt="simple image" browser={false} />

Wrap any content in a titled frame:

mdx

<Frame title="preview">
  <div className="p-4 bg-surface rounded">your content here</div>
</Frame>

preview

your content here

prop	type	default	description
src	string	-	Image source URL
alt	string	-	Alt text for accessibility
caption	string	-	Optional caption below image
browser	boolean	true	Show browser chrome

prop	type	default	description
title	string	-	Optional title in header
children	ReactNode	-	Content to wrap

Display screenshots with optional browser chrome decoration.

mdx

<Screenshot
  src="/screenshot.png"
  alt="dashboard view"
  caption="the main dashboard"
/>

mdx

<Screenshot src="/image.png" alt="simple image" browser={false} />

Wrap any content in a titled frame:

mdx

<Frame title="preview">
  <div className="p-4 bg-surface rounded">your content here</div>
</Frame>

preview

your content here

prop	type	default	description
src	string	-	Image source URL
alt	string	-	Alt text for accessibility
caption	string	-	Optional caption below image
browser	boolean	true	Show browser chrome

prop	type	default	description
title	string	-	Optional title in header
children	ReactNode	-	Content to wrap