Browser Window
A browser window mockup for showing a dashboard or web app on a landing page, in Chrome or Safari frames, with a phone layout under 480px.
Browser Window
A browser window mockup for showing a dashboard or web app on a landing page, in Chrome or Safari frames, with a phone layout under 480px.
The window frame is drag-resizable on desktop with a pointer.
When to use it
Frame a screenshot or a live embed when the viewer needs to know they are looking at a web product rather than a flat image. The URL bar is the cheapest way to establish that context, and the sidebar slot lets a marketing shot match the real app layout.
Props · BrowserWindow
| Prop | Type | Default |
|---|---|---|
| size? | "sm" | "md" | "lg" | "xl" | "md" |
| showSidebar? | boolean | false |
| sidebarPosition? | "left" | "right" | "top" | "bottom" | "left" |
| headerStyle? | "minimal" | "full" | "minimal" |
| variant? | "chrome" | "safari" | "generic" | "generic" |
| theme? | "light" | "dark" | "auto" | "auto" |
| url? | string | · |
| showNavButtons? | boolean | false |
| showActions? | boolean | false |
| sidebar? | React.ReactNode | · |
| sidebarWidthClassName? | string | · |
| addressBarAlign? | "center" | "right" | "center" |
| sidebarItems? | Array<{ icon?: React.ReactNode label: string active?: boolean badge?: string | number }> | · |
Generated from the component source. Run npm run props:extract after changing a signature.