iPhone 17

A front-facing iPhone frame with a customizable screen. Pass React children to display your own app, image, video, or interactive content; the original lock screen appears when no children are supplied.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/iphone-17.json

Usage

tsx

import { IPhone17 } from "@/components/hangry-ui/components/iphone-17";

<IPhone17 />
<IPhone17 color="lavender" label="My app preview">
  <div className="min-h-full bg-background p-5 pb-10 pt-16">
    <h2>Welcome to my app</h2>
    <p>Your own content goes here.</p>
  </div>
</IPhone17>

The screen scrolls independently when content is taller than the display. Use top and bottom padding to leave space for the Dynamic Island and home indicator. Links, buttons, and form controls inside the screen remain interactive. For state and event handlers, pass a Client Component as children; the phone frame itself remains server-compatible.

Props

color: "sage", "lavender", "mist-blue", "black", or "white". Defaults to "sage".
children: React content for the screen. Omit it to show the default wallpaper and clock.
className: Additional SVG classes. The illustration scales to its container with a 384px maximum width.
label: Accessible image description. Defaults to "iPhone 17 front illustration".

Setup notes

The illustration is inspired by the standard iPhone 17, using Apple’s design and finish references. This is stylized artwork rather than a product render. The frame and default lock screen are SVG. Custom screen content renders as HTML inside a clipped SVG foreignObject, with no extra dependencies.

The frame is server-compatible and uses unique SVG identifiers for each instance. It has a transparent background and scales without losing sharpness.