Skip to main content
A pixel-perfect Safari browser mockup component for displaying screenshots, images, or videos.

​
Installation

npx shadcn@latest add @magicui/safari

​
Usage

import { Safari } from "@/components/ui/safari"

export default function Example() {
  return <Safari url="https://magicui.design" imageSrc="/screenshot.png" />
}

​
Props

​
url
string
URL to display in the Safari address bar
​
imageSrc
string
Source URL of the image to display in the browser window
​
videoSrc
string
Source URL of the video to display (takes precedence over imageSrc)
​
mode
'default' | 'simple'
default:"'default'"
Display mode - ‘default’ shows full browser chrome, ‘simple’ shows minimal UI
​
className
string
Additional CSS classes applied to the wrapper div
​
style
React.CSSProperties
Inline styles applied to the wrapper div

​
Examples

​
With Image

<Safari url="https://example.com" imageSrc="/screenshot.png" />

​
With Video

<Safari url="https://example.com" videoSrc="/demo.mp4" />

​
Simple Mode

<Safari url="https://example.com" mode="simple" imageSrc="/screenshot.png" />

​
Notes

  • Component maintains a 1203:753 aspect ratio
  • Size is controlled by the wrapper div, not props
  • Screen area is masked only when media is provided
  • Videos render as DOM overlay for iOS compatibility
  • Accepts all standard HTMLDivElement props

​
Credits

Created by dillionverma and Yeom-JinHo

Build docs developers (and LLMs) love

Get started for freeTalk to us