Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA Safari-style window with traffic lights, a padlocked address field and optional tabs. Children render as the page, at natural size or laid out at desktop width and scaled to fit.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { BrowserFrame } from "@/components/ui/browser-frame"<BrowserFrame url="acme.com" screenWidth={1280}>
<LandingPage />
</BrowserFrame><BrowserFrame
url="acme.com/docs"
tabs={["Docs", "Pricing"]}
src="/docs.png"
alt="Acme docs"
/>| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Page content. Ignored when src is set. |
url | string | "acme.com" | Address shown in the URL field. A short domain reads best. |
secure | boolean | true | Shows the padlock before the address. |
tabs | (string | { title: string; icon?: ReactNode })[] | - | Tabs shown in a strip under the toolbar. Omit for a single-tab window. |
activeTab | number | 0 | Index of the selected tab. |
src | string | - | Screenshot shown as the page, cropped to fill it. |
alt | string | "" | Alternative text for src. |
screenWidth | number | - | Lays the page out at this width, then scales it to fit. Implies aspectRatio 16/10 unless you set one. |
aspectRatio | number | - | Aspect ratio of the page area, for example 16 / 10. Omit to let the content set the height. |
screenClassName | string | - | Class names for the page area. |
Also accepts all <div> props.