Mobile Mockups

A stunning, fully responsive collection of mobile device mockups engineered for Next.js, allowing you to present your app designs, images, or autoplaying videos in gorgeous, high-fidelity hardware frames.

The suite ships with seven iconic models, led by the iPhone 17 Pro Max — a near-uniform bezel, a compact Dynamic Island and the flush Camera Control on the right rail. Behind it sit the iPhone 14 Pro Max, the flat-edged iPhone 12 Pro Max, the retro iPhone 5, the sleek Samsung S24 Ultra, the uniquely rounded Google Pixel 8, and the futuristic Google Pixel 10 — so you can evoke nostalgia with a classic home button or show off the newest glass, from the same API.

Each device is its own exported component that wraps whatever you put inside it — a screenshot, an autoplaying video, or a live React tree. Every frame is pure CSS/SVG, so it stays crisp at any zoom. The screens below run this site's own hero section as live children rather than a screenshot: the headline word flips, and the install command copies.

iPhone 17 Pro Max

The flagship frame — near-uniform bezel, a compact Dynamic Island and the flush Camera Control. Running this site's hero section as live children.

Passchildren: to embed a real, interactive screen; src and videoSrc swap in a screenshot or a looping video instead.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Mobile Mockup

npx shadcn@latest add @algorize-ui/mobile-mockup

components/custom/blocks/MobileMockupBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Mobile Mockup needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

iPhone 14 Pro Max

A wider Dynamic Island and a chunkier bezel than the 17.

videoSrc: suits this frame well — the bezel is slim enough not to distract from motion.

iPhone 12 Pro Max

Flat edges and a notch, at a 19.5:9 aspect ratio.

src: should match that ratio or the screenshot will letterbox inside the frame.

iPhone 5

The retro frame — thick bezels, a home button and a 16:9 screen.

src: fills the screen with an image; videoSrc auto-plays a muted, looping video instead.

Samsung S24 Ultra

Squared-off corners and a centred punch-hole camera.

className: sizes the outer wrapper, which is how you scale the whole mockup.

Google Pixel 8

Heavily rounded corners and a 20:9 screen.

src: is cropped by those corner radii, so keep anything important away from the edges.

Google Pixel 10

Passchildren: instead of src to embed a live, scrollable app rather than a screenshot.

Features

Learn about the Mobile Mockup component's realistic device framing, perfect for presenting app screenshots with proper bezels.

7 Unique Devices

Choose from a variety of iconic models, from the latest iPhone 17 Pro Max through the classic iPhones to Samsung Ultra and Google Pixel.

Pure CSS/SVG

No heavy raster images used for the frames. Everything is built with perfectly scaled SVG and CSS for blazing fast performance.

Media & React Ready

Easily pass static images, autoplaying looping videos, or full interactive React trees directly into the screen container.

Theme Adapting

The hardware frames natively adapt their bezels, finishes, and shadows based on your app's current light or dark mode.

Best Practices & Guidelines

Content Aspect Ratios

When passing screenshots as images, try to ensure they roughly match a vertical aspect ratio close to the frame you picked (16:9 on the iPhone 5, 19.5:9 on the iPhone 12/14/17 and Samsung, 20:9 on the Pixels) to prevent unnatural stretching or cropping inside the frame.

Sizing Live Screens

Tailwind's responsive prefixes key off the viewport, not the frame. A section that uses sm: or lg: classes still renders at desktop sizes inside a 300px-wide mockup, so give an embedded screen a fixed type scale instead of reusing your page-level layout component.

Handling Overflow

If you are passing interactive React components inside the mockup instead of an image, ensure you add overflow-y-auto to your child wrapper if you want the screen content to be scrollable.

Props Reference

Prop	Type	Description
`children`	`ReactNode`	Custom content to render inside the phone screen (useful for complex UIs).
`src`	`string`	Image URL to display in the screen (fills the whole screen).
`videoSrc`	`string`	Video URL to auto-play inside the screen (muted and looping).
`className`	`string`	Additional CSS classes to apply to the mockup's outer wrapper.