Browser Window

Chrome / Safari mock window frame for screenshots and embeds.

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.

Install

Adds Browser Window and its dependencies to your project through the shadcn CLI.

$ npx shadcn@latest add https://www.ssicevs.com/r/browser-window.json

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?	booleanBack / forward / reload buttons after the window controls (full header).	false
showActions?	boolean	false
sidebar?	React.ReactNodeCustom sidebar node — overrides the default passive SidebarContent when provided (e.g. an interactive sidebar).	—
sidebarWidthClassName?	string	—
addressBarAlign?	"center" \| "right""right" biases the address bar toward the content area on mobile.	"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.