Safari

Component 113

About

A safari browser mockup to showcase your website.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Safari to your project and fits it to your theme.

Code

How Safari is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

function SafariDemo() {
  return (
    <div className="relative">
      <Safari url="magicui.design" className="size-full" />
    </div>
  )
}

function SafariWithCustomImage() {
  return (
    <div className="relative">
      <Safari
        url="magicui.design"
        className="size-full"
        src="https://via.placeholder.com/1200x750"
      />
    </div>
  )
}

export default {
  SafariDemo,
  SafariWithCustomImage,
}