Iphone Mockup

Component 105

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="14" color="midnight" screenBg="#101014">
        <div style={{
            color: 'white',
            fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto',
            padding: 16
        }}>
            <h2 style={{ margin: 0 }}>Hello 👋</h2>
            <p style={{ opacity: 0.8 }}>This content respects safe areas.</p>
        </div>
    </IPhoneMockup>
  );
}