iPhone 15 Pro

High-fidelity iPhone 15 Pro mockup with Dynamic Island and authentic Apple design. An open source TypeScript component for Next.js that integrates beautifully with Tailwind CSS and shadcn/ui.

Loading component...

import { SVGProps } from "react";export interface Iphone15ProProps extends SVGProps<SVGSVGElement> {  width?: number;  height?: number;  src?: string;  videoSrc?: string;}export default function Iphone15Pro({  width = 433,  height = 882,  src,  videoSrc,  ...props}: Iphone15ProProps) {  return (    <svg      width={width}      height={height}      viewBox={`0 0 ${width} ${height}`}      fill="none"      xmlns="http://www.w3.org/2000/svg"      {...props}    >      <path        d="M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z"        className="fill-white dark:fill-[#262626]"      />      <path        opacity="0.5"        d="M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z"        className="fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]"      />      {/* Default background when no image/video */}      {!src && !videoSrc && (        <rect          x="21.25"          y="19.25"          width="389.5"          height="843.5"          rx="55.75"          ry="55.75"          fill="#000000"          className="dark:fill-[#000000]"        />      )}      {src && (        <image          href={src}          x="21.25"          y="19.25"          width="389.5"          height="843.5"          preserveAspectRatio="xMidYMid slice"          clipPath="url(#roundedCorners)"        />      )}      {videoSrc && (        <foreignObject          x="21.25"          y="19.25"          width="389.5"          height="843.5"          clipPath="url(#roundedCorners)"        >          <video            className="size-full object-cover"            src={videoSrc}            autoPlay            loop            muted            playsInline          />        </foreignObject>      )}      <path        d="M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z"        className="fill-[#F5F5F5] dark:fill-[#262626]"      />      <path        d="M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z"        className="fill-[#F5F5F5] dark:fill-[#262626]"      />      <path        d="M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <defs>        <clipPath id="roundedCorners">          <rect            x="21.25"            y="19.25"            width="389.5"            height="843.5"            rx="55.75"            ry="55.75"          />        </clipPath>      </defs>    </svg>  );}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/iphone-15-pro.json

npx shadcn@latest add https://www.shadcn.io/registry/iphone-15-pro.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/iphone-15-pro.json

bunx shadcn@latest add https://www.shadcn.io/registry/iphone-15-pro.json

Features

Free open source React component built for Next.js applications with zero licensing costs
High-fidelity iPhone 15 Pro mockup with authentic Apple design details using modern SVG
TypeScript-first development with comprehensive type definitions and IntelliSense support
Tailwind CSS integration for seamless styling and automatic dark mode theme switching
shadcn/ui compatibility following established design system patterns and conventions
Image and video content support with proper aspect ratio handling using JavaScript
Accurate device proportions and precise button placement matching real iPhone 15 Pro specifications
Dynamic Island representation with authentic styling and positioning
Hardware detail rendering including volume buttons, power button, and camera module styling
Responsive design with customizable dimensions while maintaining device aspect ratio
Performance optimized with clean SVG-based implementation for crisp rendering at any scale

Examples

Clean Device Mockup

Loading component...

import { SVGProps } from "react";export interface Iphone15ProProps extends SVGProps<SVGSVGElement> {  width?: number;  height?: number;  src?: string;  videoSrc?: string;}export default function Iphone15Pro({  width = 433,  height = 882,  src,  videoSrc,  ...props}: Iphone15ProProps) {  return (    <svg      width={width}      height={height}      viewBox={`0 0 ${width} ${height}`}      fill="none"      xmlns="http://www.w3.org/2000/svg"      {...props}    >      <path        d="M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z"        className="fill-white dark:fill-[#262626]"      />      <path        opacity="0.5"        d="M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z"        className="fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]"      />      {/* Default background when no image/video */}      {!src && !videoSrc && (        <rect          x="21.25"          y="19.25"          width="389.5"          height="843.5"          rx="55.75"          ry="55.75"          fill="#000000"          className="dark:fill-[#000000]"        />      )}      {src && (        <image          href={src}          x="21.25"          y="19.25"          width="389.5"          height="843.5"          preserveAspectRatio="xMidYMid slice"          clipPath="url(#roundedCorners)"        />      )}      {videoSrc && (        <foreignObject          x="21.25"          y="19.25"          width="389.5"          height="843.5"          clipPath="url(#roundedCorners)"        >          <video            className="size-full object-cover"            src={videoSrc}            autoPlay            loop            muted            playsInline          />        </foreignObject>      )}      <path        d="M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z"        className="fill-[#F5F5F5] dark:fill-[#262626]"      />      <path        d="M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z"        className="fill-[#F5F5F5] dark:fill-[#262626]"      />      <path        d="M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <defs>        <clipPath id="roundedCorners">          <rect            x="21.25"            y="19.25"            width="389.5"            height="843.5"            rx="55.75"            ry="55.75"          />        </clipPath>      </defs>    </svg>  );}

With Image Content

Loading component...

import { SVGProps } from "react";export interface Iphone15ProProps extends SVGProps<SVGSVGElement> {  width?: number;  height?: number;  src?: string;  videoSrc?: string;}export default function Iphone15Pro({  width = 433,  height = 882,  src,  videoSrc,  ...props}: Iphone15ProProps) {  return (    <svg      width={width}      height={height}      viewBox={`0 0 ${width} ${height}`}      fill="none"      xmlns="http://www.w3.org/2000/svg"      {...props}    >      <path        d="M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z"        className="fill-white dark:fill-[#262626]"      />      <path        opacity="0.5"        d="M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z"        className="fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]"      />      {/* Default background when no image/video */}      {!src && !videoSrc && (        <rect          x="21.25"          y="19.25"          width="389.5"          height="843.5"          rx="55.75"          ry="55.75"          fill="#000000"          className="dark:fill-[#000000]"        />      )}      {src && (        <image          href={src}          x="21.25"          y="19.25"          width="389.5"          height="843.5"          preserveAspectRatio="xMidYMid slice"          clipPath="url(#roundedCorners)"        />      )}      {videoSrc && (        <foreignObject          x="21.25"          y="19.25"          width="389.5"          height="843.5"          clipPath="url(#roundedCorners)"        >          <video            className="size-full object-cover"            src={videoSrc}            autoPlay            loop            muted            playsInline          />        </foreignObject>      )}      <path        d="M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z"        className="fill-[#F5F5F5] dark:fill-[#262626]"      />      <path        d="M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z"        className="fill-[#F5F5F5] dark:fill-[#262626]"      />      <path        d="M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <defs>        <clipPath id="roundedCorners">          <rect            x="21.25"            y="19.25"            width="389.5"            height="843.5"            rx="55.75"            ry="55.75"          />        </clipPath>      </defs>    </svg>  );}

With Video Content

Loading component...

import { SVGProps } from "react";export interface Iphone15ProProps extends SVGProps<SVGSVGElement> {  width?: number;  height?: number;  src?: string;  videoSrc?: string;}export default function Iphone15Pro({  width = 433,  height = 882,  src,  videoSrc,  ...props}: Iphone15ProProps) {  return (    <svg      width={width}      height={height}      viewBox={`0 0 ${width} ${height}`}      fill="none"      xmlns="http://www.w3.org/2000/svg"      {...props}    >      <path        d="M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z"        className="fill-white dark:fill-[#262626]"      />      <path        opacity="0.5"        d="M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z"        className="fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]"      />      {/* Default background when no image/video */}      {!src && !videoSrc && (        <rect          x="21.25"          y="19.25"          width="389.5"          height="843.5"          rx="55.75"          ry="55.75"          fill="#000000"          className="dark:fill-[#000000]"        />      )}      {src && (        <image          href={src}          x="21.25"          y="19.25"          width="389.5"          height="843.5"          preserveAspectRatio="xMidYMid slice"          clipPath="url(#roundedCorners)"        />      )}      {videoSrc && (        <foreignObject          x="21.25"          y="19.25"          width="389.5"          height="843.5"          clipPath="url(#roundedCorners)"        >          <video            className="size-full object-cover"            src={videoSrc}            autoPlay            loop            muted            playsInline          />        </foreignObject>      )}      <path        d="M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z"        className="fill-[#F5F5F5] dark:fill-[#262626]"      />      <path        d="M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z"        className="fill-[#F5F5F5] dark:fill-[#262626]"      />      <path        d="M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <defs>        <clipPath id="roundedCorners">          <rect            x="21.25"            y="19.25"            width="389.5"            height="843.5"            rx="55.75"            ry="55.75"          />        </clipPath>      </defs>    </svg>  );}

API Reference

Iphone15Pro

Prop	Type	Default	Description
`src`	`string`	`undefined`	Image source to display inside the phone screen
`videoSrc`	`string`	`undefined`	Video source to display inside the phone screen
`width`	`number`	`433`	Width of the iPhone component
`height`	`number`	`882`	Height of the iPhone component
`className`	`string`	`undefined`	Additional CSS classes to apply

The component also accepts all standard SVG props via SVGProps<SVGSVGElement>.

Use Cases

This free open source React component is perfect for:

Next.js portfolios - Showcase iOS applications with TypeScript integration and type safety
App Store presentations - Display iPhone app screenshots in authentic device frames
shadcn/ui projects - Integrate premium device mockups into your design system
Marketing materials - Present iOS applications with professional iPhone 15 Pro mockups using Tailwind CSS
Product demonstrations - Create compelling product demos with video content display
Client presentations - Impress clients with high-fidelity iOS app presentations using modern JavaScript
Design portfolios - Display iOS design work within authentic Apple device contexts
Developer documentation - Show iOS app features within realistic device environments

Technical Details

Apple-Authentic Design

This open source component replicates genuine iPhone 15 Pro specifications:

Exact proportions matching Apple's official device dimensions
Dynamic Island implementation with precise positioning and styling
Hardware button accuracy including volume rocker and power button placement
Camera module representation with authentic design elements
TypeScript type validation ensuring component reliability

Performance Optimizations

Optimized SVG structure with minimal JavaScript footprint for fast loading
Next.js compatibility with full server-side rendering and static generation support
Efficient clip paths for seamless content integration without performance impact
Tailwind CSS optimization for consistent theming and responsive design

Accessibility

This component includes comprehensive accessibility features:

Semantic SVG markup with proper ARIA labels for assistive technologies
React-compatible interaction when used in interactive Next.js applications
Responsive design patterns that adapt to various screen sizes and orientations
High contrast support with automatic dark mode adaptation using Tailwind CSS classes

Reactiphone-15-pro

Reactiphone-15-pro

Reactiphone-15-pro

Reactiphone-15-pro

On this page