iPhone

A visual representation of an iPhone device with a screen area. It displays an image or video inside the screen. Use it to showcase content within a phone mockup.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/iphone

npx layro-cli add @magicuidesign/iphone

npx layro-cli add @magicuidesign/iphone

bunx layro-cli add @magicuidesign/iphone

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import type { HTMLAttributes } from "react"

const PHONE_WIDTH = 433
const PHONE_HEIGHT = 882
const SCREEN_X = 21.25
const SCREEN_Y = 19.25
const SCREEN_WIDTH = 389.5
const SCREEN_HEIGHT = 843.5
const SCREEN_RADIUS = 55.75

// Calculated percentages
const LEFT_PCT = (SCREEN_X / PHONE_WIDTH) * 100
const TOP_PCT = (SCREEN_Y / PHONE_HEIGHT) * 100
const WIDTH_PCT = (SCREEN_WIDTH / PHONE_WIDTH) * 100