Safari

PreviewCode

@/demos/SafariDemo.tsx

import { Safari } from '@/registry/magicui/safari'

export function SafariDemo() {
  return (
    <div class="w-300.75">
      <Safari url="magicui.design" />
    </div>
  )
}

Examples

With Image

PreviewCode

@/demos/SafariDemo2.tsx

import { Safari } from '@/registry/magicui/safari'

export function SafariDemo2() {
  return (
    <div class="w-300.75">
      <Safari
        url="magicui.design"
        imageSrc="https://placehold.co/1200x750?text=Hello+World"
      />
    </div>
  )
}

With Video

PreviewCode

@/demos/SafariDemo3.tsx

import { Safari } from '@/registry/magicui/safari'

export function SafariDemo3() {
  return (
    <div class="w-300.75">
      <Safari
        url="magicui.design"
        videoSrc="https://videos.pexels.com/video-files/27180348/12091515_2560_1440_50fps.mp4"
      />
    </div>
  )
}

Simple Mode

PreviewCode

@/demos/SafariDemo4.tsx

import { Safari } from '@/registry/magicui/safari'

export function SafariDemo4() {
  return (
    <div class="w-300.75">
      <Safari url="magicui.design" mode="simple" />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/safari

bun

bunx shadcn@latest add @magicui-solid/safari

yarn

yarn dlx shadcn@latest add @magicui-solid/safari

npm

npx shadcn@latest add @magicui-solid/safari

Import

import { Safari } from '@/components/magicui/safari'

Usage

<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	'default' 'simple'	'default'	The display mode of the Safari window.
class	string	-	Additional classes applied to the wrapper <div>
style	JSX.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.

Original:

magicui.design/docs/components/safari