Mockups

Browser Window

new

Neutral browser chrome around a screenshot or live UI, for product visuals.

app.northwind.io/analytics

Last 30 days

Analytics

Visitors

48.2k+12%

Signups

1,904+8%

Conversion

3.9%+0.4

Installation

npx shadcn@latest add @blank/browser-window

Usage

import {
  BrowserWindow,
  BrowserWindowAddress,
  BrowserWindowContent,
  BrowserWindowControls,
  BrowserWindowHeader,
} from "@/components/ui/browser-window"

<BrowserWindow>
  <BrowserWindowHeader>
    <BrowserWindowControls />
    <BrowserWindowAddress>acme.com</BrowserWindowAddress>
  </BrowserWindowHeader>
  <BrowserWindowContent>
    <img src="/screenshot.png" alt="Acme dashboard" />
  </BrowserWindowContent>
</BrowserWindow>

A generic window, not a particular browser: the controls stay quiet grey dots, and the toolbar holds whatever you compose into it. When the frame should read as Safari specifically, use Safari Frame.

The header is a three-column grid — controls, address, actions — so the address stays centered however wide the window gets. Put a fragment or an empty span in a column you do not need.

Examples

Default

inset (above) floats the page in a rounded frame, which reads well as a marketing visual. default puts the page flush under the toolbar, like a real window.

studio-halden.com