iPhone Mockup

Pro

A thick, extruded iPhone with a machined side rail, side buttons, and lock screen.

css 3dillustrationiphonephonemockupdevice3dcss

Overview

iPhone Mockup is a React and Tailwind CSS phone mockup for app landing pages, in Next.js or any React app, built in pure CSS 3D to iPhone 17 Pro proportions. The body is extruded, so turning it reveals real thickness, the side buttons, Camera Control, and a bottom rail with USB-C and speaker holes. Your wallpaper sits under an editable lock screen with Dynamic Island, clock, and date. Rotate, tilt, and five finishes are props, and the phone resizes to fit its parent. Hide the lock screen for app screenshots, and use portrait images, since the screen crops to fill.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add iphone-mockup

Usage

Import IphoneMockup from @/components/wensity/iphone-mockup and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { IphoneMockup } from "@/components/wensity/iphone-mockup";
 2
 3export default function Example() {
 4  return (
 5    <IphoneMockup
 6      theme="cosmic-orange"
 7      src="/screenshot.webp"
 8      className="w-full max-w-[260px]"
 9    />
10  );
11}

Props

Prop	Type	Default	Description
`theme`	"cosmic-orange" \| "deep-blue" \| "silver" \| "black" \| "wensity-red"	"cosmic-orange"	Chassis theme: Apple's Cosmic Orange, Deep Blue, or Silver finishes, plus custom Black and Wensity Red.
`rotate`	number	-22	Yaw in degrees. Negative swings the right rail (side button, Camera Control) toward the viewer; 0 reads dead-on and hides the thickness.
`tilt`	number	6	Pitch in degrees. Positive tips the top away so the bottom rail — speaker grille and USB-C — comes into view.
`src`	string	-	Wallpaper shown on the display (fills the screen, object-cover).
`time`	string	"9:41"	Lock-screen clock, also shown in the status bar.
`date`	string	"Wednesday, August 12"	Date line above the lock-screen clock.
`showLockScreen`	boolean	true	Render the lock-screen furniture. Turn off to show a wallpaper or screenshot unobstructed.
`screenAlt`	string	"Wallpaper"	Alt text for the wallpaper image.
`label`	string	"iPhone Mockup illustration"	Accessible label announced for the illustration.

Featured in React 3D components.