Iphone

IPhone mockup with screen, header, and custom children content.

Profile picture

Chen Xi

Guangzhou, Zhongguo
ShishangZhongwenYinyueDianyingYundong
YI
AO
CH@ChenXi
SU
AN
08:09

Installation

npx shadcn@latest add https://scrollxui.dev/registry/iphone.json 

Usage

import { Iphone } from "@/components/ui/iphone";
<div className="w-full max-w-sm mx-auto p-4">
  <Iphone showHeader>
    <div className="absolute inset-0 z-50 flex items-center justify-center">
      <img
        src="https://cdn.pixabay.com/photo/2025/01/13/12/29/ai-generated-9330361_1280.jpg"
        alt="Screen Content"
        className="w-full h-full object-cover"
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <p className="text-white font-bold">Hello inside iPhone!</p>
      </div>
    </div>
  </Iphone>
</div>

Examples


With Image

08:09

With Video

08:09

API Reference

Iphone

IPhone mockup with screen, header, and custom children content.

Props

PropertyTypeDefaultDescription
imgUrlstring_
URL of the image displayed on the iPhone screen.
clipstring_
URL of a video displayed on the iPhone screen.
showHeaderbooleanfalse
Whether to show the iPhone status bar (time, battery, wifi).
headerClassNamestring_
Optional CSS class to customize the status bar styling.
classNamestring_
CSS class for the outer iPhone container.
styleReact.CSSProperties_
Inline styles for the iPhone container.
childrenReact.ReactNode_
Content displayed inside the iPhone screen above image/video.

Built withby Ahdeetai.