Device mockup
Also called phone mockup, browser mockup, iPhone mockup, Android mockup, or Safari mockup
A phone or browser frame drawn in CSS or SVG around a screenshot or live UI, so a landing page shows the product the way it looks on a device.
import type { ReactNode } from 'react';
// Generic frames: no brand logos, so they never date or need permission.
export function PhoneFrame({ children }: { children: ReactNode }) {
return (
<div className='relative h-[580px] w-[280px] rounded-[48px] bg-neutral-900 p-3 shadow-xl ring-1 ring-neutral-700'>
{/* Side buttons sit just outside the frame. */}
<span
aria-hidden='true'
className='absolute top-28 -left-[3px] h-14 w-[3px] rounded-l bg-neutral-700'
/>
<span
aria-hidden='true'
className='absolute top-32 -right-[3px] h-20 w-[3px] rounded-r bg-neutral-700'
/>
{/* Inner corners = outer radius minus the bezel, so the curves stay parallel. */}
<div className='relative size-full overflow-hidden rounded-[36px] bg-background'>
{children}
<span
aria-hidden='true'
className='absolute top-2.5 left-1/2 h-7 w-24 -translate-x-1/2 rounded-full bg-black'
/>
</div>
</div>
);
}
export function BrowserFrame({
url,
children
}: {
url: string;
children: ReactNode;
}) {
return (
<div className='w-[720px] overflow-hidden rounded-xl border bg-background shadow-xl'>
<div
aria-hidden='true'
className='flex h-10 items-center gap-3 border-b bg-muted px-4'
>
<span className='flex gap-1.5 *:size-3 *:rounded-full *:bg-neutral-300'>
<i />
<i />
<i />
</span>
<span className='mx-auto w-72 truncate rounded-md bg-background px-3 py-1 text-center text-xs text-muted-foreground'>
{url}
</span>
</div>
<div className='aspect-[16/10]'>{children}</div>
</div>
);
}Show the app in a phone mockup in the hero: a 280×580px frame drawn in CSS with a 12px near-black bezel, 48px outer corners, a pill-shaped camera cutout centered 10px from the top, and two thin side buttons. Inside, render the screenshot with object-cover and 38px inner corners. Beside it on wide screens, show the web app in a browser frame with three gray dots, an address bar with the site’s URL, and 12px corners. No brand logos; mark the frames aria-hidden and give the screenshots alt text.
Paste into Layerwise or any AI coding tool.
What is Device mockup?
A device mockup wraps your product in the shape of the screen it runs on. A phone frame is a tall rounded rectangle with a thick bezel, a camera cutout, and small side buttons. A browser frame is a window with three dots and an address bar. Drawing the frame in CSS or SVG keeps it sharp at any size and lets it follow your colors and dark mode, which a photo of a real device can’t.
Inside the frame goes either a screenshot or the real UI. A screenshot is simple and exact. Live UI, your actual components sized to fit, stays current with the product, can animate, and lets visitors click around. Either way, size the screen to the device’s aspect ratio, about 9:19.5 for a modern phone, and round its corners to sit just inside the frame’s.
Keep frames generic unless you have permission to use a manufacturer’s design and logos. Mark the frame as decoration with aria-hidden and give a screenshot meaningful alt text. Skip heavy shadows and steep 3D tilts that make the product harder to see, and stack a phone and a browser frame on small screens instead of squeezing them side by side.
Related terms
All termsHero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Responsive design
Designing one layout that adapts to any screen width, rearranging columns, sizes, and navigation at set widths called breakpoints.
Border radius
The CSS property that rounds an element’s corners, from a slight softening to a full pill or circle.
Drop shadow
A shadow cast behind an element to make it look raised off the page, with larger, softer shadows signaling higher elevation.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.
