iPhone

An iPhone bezel mock with status bar, Dynamic Island, lock-screen shortcuts, and home indicator. Drop in an image, video, or custom children.

iphone

0px

Customize

Edit props; preview updates instantly.

Customize

Battery

82%

Signal

4 / 4

Frame

Props

Props accepted by Iphone.

Prop	Type	Default	Description
src	string	—	Image src painted into the screen area. Cropped with `object-cover object-top`.
videoSrc	string	—	Video src for the screen — autoplays muted, loops, plays inline. Wins over `src`.
children	ReactNode	—	Custom screen content. Wins over `src` / `videoSrc` — drop in a div, gradient, or full lock-screen mock.
statusBar	boolean	true	Show the status bar row (time + signal + wifi + battery).
time	string	"9:41"	Time label rendered on the left of the status bar.
signal	0 \| 1 \| 2 \| 3 \| 4	4	Filled signal bars. Empty bars dim to 30% opacity.
wifi	boolean	true	Show the wifi glyph.
battery	number	100	Battery percentage (0–100). Drives the inner fill width.
batteryText	boolean	false	Render the percentage number inside the battery glyph.
lockButtons	boolean	true	Show the bottom flashlight + camera lock-screen shortcuts.
homeIndicator	boolean	true	Show the bottom home-indicator pill.
bezelColor	string	"#de7343"	CSS color for the thin outer phone frame and the four side buttons. The inner screen bezel stays black regardless.
screenClassName	string	—	Extra class merged onto the screen wrapper (the rounded layer that clips media).
className	string	—	Extra class merged onto the outer element. Width is governed here — the SVG fills it and the aspect-ratio is locked.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/iphone.json

Usage

Import the component and drop it into a render.

demo.tsx14 lines

import { Iphone } from "@/components/lazy-ui/device-mocks/iphone";

export function Demo() {
  return (
    <Iphone
      src="/lock-screen.jpg"
      time="9:41"
      signal={4}
      wifi
      battery={82}
      className="max-w-[280px]"
    />
  );
}