# 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.