Getting Started
Components
Animations
Text Animations
Backgrounds
import { Iphone } from "@/registry/magicui/iphone"
export function Demo() {
return (
<div className="w-[434px]">
<Iphone />
</div>
)
}
Installation
pnpm dlx shadcn@latest add @magicui/iphone
Examples
With Image
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
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>
)
}
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.
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
Next.js 15 + TypeScript ready
Copy, paste, customize in minutes
Save 100+ hours of development