Place an image or your own content in an iPhone-like phone frame — ideal for showing an app or the mobile view of your site.
Use PhoneMockup to present anything meant to be viewed on a phone — an app screenshot, a mobile web page preview, or a notification mock-up — without building the frame from scratch. It reads better than a plain image on a marketing or app-landing page because visitors immediately recognise the context.
A common example is an app landing page that shows several PhoneMockup blocks with different screenshots, placed inside a Swiper on mobile to save horizontal space.
Typical use cases
The clearest use case is an app-landing hero: a PhoneMockup showing the app's main screen next to a headline and download buttons, often combined with a Typewriter line cycling through a few feature highlights above it. A web design agency's portfolio sometimes reaches for it too, to show a responsive build's mobile layout next to the desktop screenshot on the same case-study page. It's less useful outside a genuinely mobile context — dropping a PhoneMockup around an unrelated photo just to add visual interest usually reads as decoration rather than information.
Common mistakes
The most common issue is feeding the block an image that isn't actually shaped like a phone screen — a wide desktop screenshot inside a phone frame gets squeezed or padded awkwardly, and looks obviously wrong rather than convincingly like an app. Export or crop screenshots at a genuine mobile aspect ratio before use. Retina-resolution screenshots can also be surprisingly large files; compress them the same as any other on-page image — the frame itself is lightweight, but the screenshot inside it is not exempt from normal image-weight budgets.
Give the embedded image real alt text describing what the screen shows — 'Dashboard listing today's bookings', not 'screenshot' — since the phone frame itself carries no semantic information for a screen reader; all the meaning still comes from the image.
For a row of several mockups — say, three key screens of an app — reveal them one at a time with GsapReveal as the visitor scrolls into the section, rather than showing all of them at once.
<PhoneMockup image='/media/app.png' />