Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

19.0k
208

iPhone

PreviousNext

A mockup of the iPhone

Installation

pnpm dlx shadcn@latest add @magicui/iphone

Examples

With Image

With Video

Usage

import { Iphone } from "@/components/ui/iphone"
<Iphone />

Props

PropTypeDefaultDescription
srcstring-The source of the image to display
videoSrcstring-The source of the video to display
classNamestring-Additional classes applied to the wrapper <div>
styleReact.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 433/882.
  • Masking: The screen area is only masked when media (src or videoSrc) is provided. Without media, only the frame is rendered.
  • HTML Attributes: The Iphone component accepts all standard HTMLDivElement props.
  • iOS Compatibility: Video is rendered as a DOM overlay instead of foreignObject to avoid Safari/iOS masking issues.