║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Safari date: 2024-09-01 description: A safari browser mockup to showcase your website. author: dillionverma, Yeom-JinHo published: true

<ComponentPreview name="safari-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/safari

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="safari" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Examples

With Image

<ComponentPreview name="safari-demo-2" />

With Video

<ComponentPreview name="safari-demo-3" />

Simple Mode

<ComponentPreview name="safari-demo-4" />

Usage

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

<Safari url="https://magicui.design" />

Props

| Prop | Type | Default | Description | | ----------- | --------------------- | ----------- | ----------------------------------------------------------- | | url | string | - | The URL to display in the Safari address bar | | imageSrc | string | - | The source URL of the image to display in the Safari window | | videoSrc | string | - | The source URL of the video to display in the Safari window | | mode | SafariMode | "default" | The display mode of the Safari window. | | className | string | - | Additional classes applied to the wrapper <div> | | style | React.CSSProperties | - | Inline styles applied to the wrapper <div> |

Notes

• Sizing: width and height props have been removed. The size is controlled by the wrapper <div>. The component enforces the aspect ratio 1203/753.
• Masking: The screen area is only masked when media (src or videoSrc) is provided. Without media, only the frame is rendered.
• HTML Attributes: The Safari component accepts all standard HTMLDivElement props.
• iOS Compatibility: Video is rendered as a DOM overlay instead of foreignObject to avoid Safari/iOS masking issues.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║