iPhone
Installation
CLIManual
Examples
With Image
PreviewCode
components/ui/iphone-demo-2.tsxCopy
With Video
PreviewCode
components/ui/iphone-demo-3.tsxCopy
Usage
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.