Device mockup library

Config-based shells for phones, tablets, laptops, desktops, and watches. Use them in the prevy app or copy the screen-fill snippet for your own layout.

iPhone 16 Pro Max

phone

iPhone 16 Pro Max

iPhone 16 Pro Max

SVG wrap frame from iphoneWrapFrames (recording-sized hole).

iPhone 16 Pro

phone

iPhone 16 Pro

iPhone 16 Pro

SVG wrap frame from iphoneWrapFrames (recording-sized hole).

iPhone 16 Plus

phone

iPhone 16 Plus

iPhone 15 Plus

SVG wrap frame from iphoneWrapFrames (recording-sized hole).

iPhone 15 Pro Max

phone

iPhone 15 Pro Max

iPhone 15 Pro Max

SVG wrap frame from iphoneWrapFrames (recording-sized hole).

iPhone 15 Pro

phone

iPhone 15 Pro

iPhone 15 Pro

SVG wrap frame from iphoneWrapFrames (recording-sized hole).

iPhone 16

phone

iPhone 16

iPhone 16

SVG wrap frame from iphoneWrapFrames (recording-sized hole).

iPhone 15 Plus

phone

iPhone 15 Plus

iPhone 15 Plus

SVG wrap frame from iphoneWrapFrames (recording-sized hole).

iPhone 15

phone

iPhone 15

iPhone 15

SVG wrap frame from iphoneWrapFrames (recording-sized hole).

iPhone 14 Plus

phone

iPhone 14 Plus

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "9.2%",
  top: "5.2%",
  width: "81.6%",
  height: "89.6%",
  borderRadius: "32px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

iPhone 14

phone

iPhone 14

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "9.2%",
  top: "5.2%",
  width: "81.6%",
  height: "89.6%",
  borderRadius: "32px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

iPhone 8 Plus

phone

iPhone 8 Plus

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "15%",
  top: "10%",
  width: "70%",
  height: "77%",
  borderRadius: "18px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

iPhone 8

phone

iPhone 8

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "15%",
  top: "10%",
  width: "70%",
  height: "77%",
  borderRadius: "18px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

iPad Pro 13"

tablet

iPad Pro 13"

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "13%",
  top: "13%",
  width: "74%",
  height: "74%",
  borderRadius: "18px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

iPad Pro 11"

tablet

iPad Pro 11"

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "12.6%",
  top: "12.8%",
  width: "74.8%",
  height: "74.4%",
  borderRadius: "18px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

iPad

tablet

iPad

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "14%",
  top: "13.4%",
  width: "72%",
  height: "73.2%",
  borderRadius: "16px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

iPad Mini

tablet

iPad Mini

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "13.2%",
  top: "13%",
  width: "73.6%",
  height: "74%",
  borderRadius: "16px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

Google Pixel 5

phone

Google Pixel 5

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "9.2%",
  top: "5.4%",
  width: "81.6%",
  height: "89.2%",
  borderRadius: "30px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

Samsung Galaxy S21

phone

Samsung Galaxy S21

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "8.2%",
  top: "4.6%",
  width: "83.6%",
  height: "90.8%",
  borderRadius: "30px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

Samsung Galaxy S20

phone

Samsung Galaxy S20

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "7.8%",
  top: "4.4%",
  width: "84.4%",
  height: "91.2%",
  borderRadius: "30px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

Samsung Galaxy Note 10

phone

Samsung Galaxy Note 10

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "8%",
  top: "4.8%",
  width: "84%",
  height: "90.4%",
  borderRadius: "24px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

Google Nexus 6P

phone

Google Nexus 6P

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "11%",
  top: "7%",
  width: "78%",
  height: "86%",
  borderRadius: "20px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

Google Pixel Slate

tablet

Google Pixel Slate

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "13%",
  top: "13%",
  width: "74%",
  height: "74%",
  borderRadius: "15px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

Microsoft Surface Pro 3

tablet

Microsoft Surface Pro 3

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "15%",
  top: "15%",
  width: "70%",
  height: "70%",
  borderRadius: "10px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

Google Nexus 9

tablet

Google Nexus 9

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "14%",
  top: "14%",
  width: "72%",
  height: "72%",
  borderRadius: "12px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

MacBook Pro 16"

laptop

MacBook Pro 16"

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "9.4%",
  top: "8.8%",
  width: "81.2%",
  height: "78.6%",
  borderRadius: "10px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

MacBook Pro 15"

laptop

MacBook Pro 15"

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "10.6%",
  top: "10.2%",
  width: "78.8%",
  height: "76.2%",
  borderRadius: "8px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

MacBook Air 13"

laptop

MacBook Air 13"

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "9.4%",
  top: "8.8%",
  width: "81.2%",
  height: "78.6%",
  borderRadius: "10px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

iMac 24"

desktop

iMac 24"

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "12.8%",
  top: "12.4%",
  width: "74.4%",
  height: "74.8%",
  borderRadius: "8px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

iMac 27"

desktop

iMac 27"

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "13.4%",
  top: "12.8%",
  width: "73.2%",
  height: "74%",
  borderRadius: "8px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

Apple Watch S10

watch

Apple Watch S10

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "16%",
  top: "23.5%",
  width: "46%",
  height: "53.5%",
  borderRadius: "24px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>

Apple Watch S9

watch

Apple Watch S9

Config-based mockup · swap in SVG frames later if needed.

const fill = {
  left: "16%",
  top: "23.5%",
  width: "46%",
  height: "53.5%",
  borderRadius: "24px",
};

<div className="absolute overflow-hidden bg-black" style={fill}>
  <img src={imageSrc} className="h-full w-full object-cover" alt="" />
</div>