Safari

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

export function SafariDemo() {
  return (
    <div className="w-[1203px]">
      <Safari
        url="magicui.design"
        imageSrc="https://placehold.co/1200x750?text=Hello+World"
      />
    </div>
  )
}

Open in

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

export function SafariDemo() {
  return (
    <div className="w-[1203px]">
      <Safari
        url="magicui.design"
        videoSrc="https://videos.pexels.com/video-files/27180348/12091515_2560_1440_50fps.mp4"
      />
    </div>
  )
}

Open in

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

export function SafariDemo() {
  return (
    <div className="w-[1203px]">
      <Safari url="magicui.design" mode="simple" />
    </div>
  )
}

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

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

Safari

Installation

Examples

With Image

With Video

Simple Mode

Usage

Props

Notes

Safari

Installation

Examples

With Image

With Video

Simple Mode

Usage

Props

Notes