Device Mockups 2026

About Device Mockups 2026 is a responsive Framer code component for website mockups, app showcases and product demos.

About

Device Mockups 2026 is a responsive Framer code component for website mockups, app showcases and product demos. Display images, videos or native Framer content inside Apple-inspired MacBook, iPad and iPhone frames. Connected content keeps its scrolling and links. Choose MacBook Pro, MacBook Air, MacBook Neo, iPad Pro, iPad Air, iPhone 18 Pro or Pro Max, with one device per instance. Includes rear views for iPad and iPhone, iPad orientation options and an optional live floor reflection.

What you can customize

Choose the device, view, finish, body colors, wallpaper, glare and shadows through Framer property controls. Upload images or videos, adjust their fit and position, or connect native Framer content. Set video playback, controls, poster and captions. Adjust reflection opacity, fade and gap. Built with scalable 2D SVG artwork and automatic height. No code editing needed. Reflections need visible overflow and space below.

Great for (examples)

Just a few ideas, use it anywhere your work benefits from being shown on a screen:

• MacBook website mockups and web design portfolios

• iPhone app previews and mobile UI showcases

• iPad interfaces, tablet apps and digital publications

• SaaS demos, dashboards and product landing pages

• UI/UX case studies and client project presentations

• Screen recordings, video previews and product walkthroughs

• Scrollable Framer content and interactive screen demos

• Wallpaper collections and visual design showcases

Share your build

If you ship something cool with it, post it on X and tag me @Matthias_Oel, or send it over. I’d love to see what you create.

Need help?

Questions or feedback? Reach me anytime: [email protected] or on X @Matthias_Oel.

Need a matching component?

Explore more ways to present your work:

• MacBook Carousel

• iPhone Duo Mockup

• Explore all components →