iPhone Mockup

CSS-only iPhone device frames for showcasing mobile apps and designs.

Your App

1import { iPhoneMockup as IPhoneMockup } from "@/zeroui/components/mockups";
2
3export default function Example() {

15 Pro

1<IPhoneMockup model="15-pro" />
2<IPhoneMockup model="15" />
3<IPhoneMockup model="14" />

Black

Silver

Gold

Blue

Natural

1<IPhoneMockup color="black" />
2<IPhoneMockup color="silver" />
3<IPhoneMockup color="gold" />

1<IPhoneMockup>
2  <img
3    src="/your-screenshot.png"

name	type	default	description
children	ReactNode	-	-
model	"15-pro" \| "15" \| "14" \| "se"	"15-pro"	-
color	"black" \| "silver" \| "gold" \| "blue" \| "natural"	"black"	-
scale	number	1	-
className	string	""	-
screenClassName	string	""	-