iPhone

PreviewCode

@/demos/IphoneDemo.tsx

import { Iphone } from '@/registry/magicui/iphone'

export function IphoneDemo() {
  return (
    <div class="w-108.5">
      <Iphone />
    </div>
  )
}

Examples

With Image

PreviewCode

@/demos/IphoneDemo2.tsx

import { Iphone } from '@/registry/magicui/iphone'

export function IphoneDemo2() {
  return (
    <div class="w-108.5">
      <Iphone src="https://placehold.co/900x1600?text=Hello+World" />
    </div>
  )
}

With Video

PreviewCode

@/demos/IphoneDemo3.tsx

import { Iphone } from '@/registry/magicui/iphone'

export function IphoneDemo3() {
  return (
    <div class="w-108.5">
      <Iphone videoSrc="https://videos.pexels.com/video-files/8946986/8946986-uhd_1440_2732_25fps.mp4" />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/iphone

bun

bunx shadcn@latest add @magicui-solid/iphone

yarn

yarn dlx shadcn@latest add @magicui-solid/iphone

npm

npx shadcn@latest add @magicui-solid/iphone

Import

import { Iphone } from '@/components/magicui/iphone'

Usage

<Iphone />

Props

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

Original:

magicui.design/docs/components/iphone