║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: iPhone date: 2024-09-01 description: A mockup of the iPhone author: dillionverma, Yeom-JinHo published: true

<ComponentPreview name="iphone-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/iphone

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="iphone" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Examples

With Image

<ComponentPreview name="iphone-demo-2" />

With Video

<ComponentPreview name="iphone-demo-3" />

Usage

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

<Iphone />

Props

| Prop | Type | Default | Description | | ----------- | --------------------- | ------- | ------------------------------------------------- | | src | string | - | The source of the image to display | | videoSrc | string | - | The source of the video to display | | className | string | - | Additional classes applied to the wrapper <div> | | style | React.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.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║