Browser Window

A mock browser window for presenting UI previews, screenshots-as-code, or full page layouts in your documentation. It renders its children inside a browser-style frame with a URL bar and an optional zoom control — the current scale is displayed like in a real browser and readers can zoom in and out themselves.

Import

Code
import { BrowserWindow } from "zudoku/components";

Usage

Code
<BrowserWindow>
  <div className="flex flex-col items-center gap-3 p-10 text-center">
    <span className="text-2xl font-bold">Hello, world!</span>
    <p className="text-muted-foreground">Any content renders inside the browser frame.</p>
    <Button>Get started</Button>
  </div>
</BrowserWindow>

Scale

Use the scale prop to set the initial zoom of the content. This is useful for presenting full-width layouts, like a landing page, at a reduced size. Passing a scale enables the zoom control in the toolbar showing the current scale — readers can change it with the +/- buttons or click the percentage to reset it, just like in a real browser. Without a scale, the zoom control is hidden and the content renders at full size (pass scale={1} to start at 100% with the control enabled).

Code
<BrowserWindow scale={0.5}>
  <div className="flex flex-col items-center gap-3 p-10 text-center">
    <span className="text-4xl font-bold">Scaled to 50%</span>
    <p className="text-muted-foreground">
      The content is laid out at full width and scaled down to fit.
    </p>
  </div>
</BrowserWindow>

Scaling affects layout, not just size: at scale={0.5} the content is laid out at twice the container width and scaled down, so responsive layouts behave as if viewed on a larger screen.

URL

Set the url prop to change the address shown in the URL bar (defaults to localhost:3000):

Code
<BrowserWindow url="https://developers.example.com">
  <p className="p-10 text-center text-muted-foreground">Your developer portal</p>
</BrowserWindow>

Props