Iphone Mockup

Component 400

About

A configurable Iphone mockup

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Iphone Mockup to your project and fits it to your theme.

Code

How Iphone Mockup is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import IPhoneMockup from "@/components/ui/iphone-mockup";


export default function DemoOne() {
  return (
    <IPhoneMockup
        model="15-pro"
        color="natural-titanium"
        wallpaper="https://cdn.21st.dev/assets/mirror/fe/fe93bc0812d60130c9eef6d68e02fa99ded883248049a9107bfb64dbd37fae34.jpg"
        >
        {/* Optional content instead of wallpaper */}
        </IPhoneMockup>
  );
}