Skip to contentSkip to Content
Feedback
ComponentsBrowserFrame

BrowserFrame

Browser window chrome around any content: three dots, a mono URL bar, and an optional right-aligned status label. Use it to frame live embeds — roadmap miniatures, rendered components, page excerpts — as the page they ship on, instead of pasting a screenshot.

API

PropTypeDefaultDescription
urlstring—Address shown in the mono URL bar.
labelstring—Optional right-aligned mono label, e.g. "● LIVE".
footerReactNode—Optional status-bar strip inside the window, under the content: the place for links or actions that belong to the framed content.
childrenReactNode—Content rendered inside the window body.

Example

pguijas.github.io/folio/docs/plugins/roadmap

● LIVE

Releases

3 / 6

v0.1

Foundation

v0.2

Theming

v0.3

One Binary

v0.4

Agent Ready

Up next

+ 2 more

<BrowserFrame url="pguijas.github.io/folio/docs/plugins/roadmap" label="● LIVE">
  <Roadmap compact maxPhases={4} />
</BrowserFrame>

Notes

  • Server-renderable: no client state, safe in any MDX page or generated view.
  • not-prose-armored: margins are reset so it sits cleanly inside prose content.
  • Pairs with <Roadmap compact /> for landing-page roadmap miniatures.
DocPreviewMermaid