Copy page

General

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

Prop	Type	Description
url	string	Address displayed in the URL bar. Defaults to localhost:3000.
scale	number	Initial zoom of the content (e.g. 0.75 for 75%). Enables the zoom control; if omitted, the control is hidden and content renders at full size.
className	string	Additional classes for the outer frame.
contentClassName	string	Additional classes for the content viewport.
children	ReactNode	The content rendered inside the browser window.