MoonUI

Safari Mock

PRO

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

Unlock advanced capabilities with the Pro version

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-mock

Usage

Pro Required
Website preview

Examples

Website Screenshot

PRO

Frame a website screenshot with a custom address-bar URL for a polished, real-browser presentation.

Pro Required
MoonUI components page

Light & Dark Chrome

PRO

Set mode to dark to render authentic dark Safari chrome — independent of the surrounding page theme.

Pro Required
Light chrome preview

light

Dark chrome preview

dark

Live Content

PRO

Pass real MoonUI components as children to render an interactive dashboard inside the browser window.

Pro Required

Dashboard

Welcome back, Alex

Live
AL

Revenue

$48.2k

Users

2,317

Churn

1.2%