Getting Started
Blocks
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { Safari } from "@/registry/magicui/safari";
export function SafariDemo() {
return (
<div className="relative">
<Safari url="magicui.design" className="size-full" />
</div>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/safari
Examples
With Image
import { Safari } from "@/registry/magicui/safari";
export function SafariDemo() {
return (
<div className="relative">
<Safari
url="magicui.design"
className="size-full"
imageSrc="https://via.placeholder.com/1200x750"
/>
</div>
);
}
With Video
import { Safari } from "@/registry/magicui/safari";
export function SafariDemo() {
return (
<div className="relative">
<Safari
url="magicui.design"
className="size-full"
videoSrc="https://videos.pexels.com/video-files/27180348/12091515_2560_1440_50fps.mp4"
/>
</div>
);
}
Simple Mode
import { Safari } from "@/registry/magicui/safari";
export function SafariDemo() {
return (
<div className="relative">
<Safari url="magicui.design" mode="simple" className="size-full" />
</div>
);
}
Usage
import { Safari } from "@/components/magicui/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 |
width | number | 1203 | The width of the Safari window |
height | number | 753 | The height of the Safari window |
mode | SafariMode | "default" | The display mode of the Safari window. |
type SafariMode = "default" | "simple".
The Safari component also accepts all properties of the SVGElement type.
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development