Skip to main content
Display your iOS app screenshots and videos in a pixel-perfect iPhone frame.

​
Installation

npx shadcn@latest add @magicui/iphone

​
Usage

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

export default function Example() {
  return <Iphone src="/app-screenshot.png" />
}

​
Props

​
src
string
Source URL of the image to display in the iPhone screen
​
videoSrc
string
Source URL of the video to display (takes precedence over src)
​
className
string
Additional CSS classes applied to the wrapper div
​
style
React.CSSProperties
Inline styles applied to the wrapper div
The component also accepts all standard HTMLDivElement props.

​
Examples

​
With Image

<Iphone src="/screenshot.png" />

​
With Video

<Iphone videoSrc="/app-demo.mp4" />

​
Features

  • Realistic iPhone frame with accurate proportions
  • Support for images and videos
  • Auto-playing, looping videos
  • Maintains 433:882 aspect ratio
  • Rounded corners matching iPhone design
  • Dynamic island representation
  • Dark mode support

​
Notes

  • Component enforces 433:882 aspect ratio
  • Size controlled by wrapper div, not props
  • Screen area masked only when media is provided
  • Videos render as DOM overlay for iOS compatibility
  • Without media, only the frame is rendered
  • Accepts all standard HTMLDivElement props

​
Credits

Created by dillionverma and Yeom-JinHo

Build docs developers (and LLMs) love

Get started for freeTalk to us