iPhone

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Examples

With Image

Open in

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

export function Demo() {
  return (
    <div className="w-[434px]">
      <Iphone src="https://placehold.co/900x1600?text=Hello+World" />
    </div>
  )
}

With Video

Open in

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

export function Demo() {
  return (
    <div className="w-[434px]">
      <Iphone videoSrc="https://videos.pexels.com/video-files/8946986/8946986-uhd_1440_2732_25fps.mp4" />
    </div>
  )
}

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>`

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.

Examples

With Image

Open in

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

export function Demo() {
  return (
    <div className="w-[434px]">
      <Iphone src="https://placehold.co/900x1600?text=Hello+World" />
    </div>
  )
}

With Video

Open in

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

export function Demo() {
  return (
    <div className="w-[434px]">
      <Iphone videoSrc="https://videos.pexels.com/video-files/8946986/8946986-uhd_1440_2732_25fps.mp4" />
    </div>
  )
}

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>`

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.

iPhone

Installation

Examples

With Image

With Video

Usage

Props

Notes

iPhone

Installation

Examples

With Image

With Video

Usage

Props

Notes