Safari Mock
Present screenshots or live components inside a realistic macOS Safari window with traffic-light controls, an address bar, and light/dark browser chrome.
Pro features
What the Pro version adds to this component.
macOS Window Chrome
Authentic traffic-light controls and toolbar built from design tokens.
Address Bar
Editable URL text with a lock icon for a convincing browser session.
Screenshot Showcase
Drop in an image via src to frame website screenshots edge to edge.
Live Children
Render real, interactive MoonUI components inside the content area.
Light & Dark Chrome
Dark mode applies authentic dark Safari chrome, independent of page theme.
Responsive Scaling
The 16:10 window scales proportionally to whatever width you set.
Installation
Install via CLI
npx @moontra/moonui-cli add safari-mockUsage
Examples
Website Screenshot
Frame a website screenshot with a custom address-bar URL for a polished, real-browser presentation.
Light & Dark Chrome
Set mode to dark to render authentic dark Safari chrome — independent of the surrounding page theme.
Live Content
Pass real MoonUI components as children to render an interactive dashboard inside the browser window.