iPhone Mockup

An SVG mockup of an iPhone.

API

Prop NameTypeDefaultDescription
widthnumber433Width of the mockup SVG in pixels.
heightnumber882Height of the mockup SVG in pixels.
srcstringnullURL of the image to display inside the mockup.

Component Code

You can copy and paste the following code to create this component:

iPhone15ProMockup.vue

Features

  • Realistic iPhone 15 Pro Mockup: Provides an accurate SVG representation of the iPhone 15 Pro, perfect for showcasing mobile app designs or website previews.
  • Customizable Dimensions: Adjust the width and height props to fit your specific design requirements.
  • Image Display Support: Use the src prop to insert any image into the mockup screen area, allowing for dynamic content display.
  • Light and Dark Mode Compatibility: The mockup adapts its colors based on the theme, ensuring consistency in both light and dark modes.
  • Easy Integration: Simple to include in your Vue projects with minimal setup.

Credits

Images Slider
A full page slider with images that can be navigated with the keyboard.
Lamp Effect
A captivating lamp lighting effect with conic gradients, spotlights, and glowing lines for an immersive visual experience.