A pixel-perfect iPhone Pro mockup with Dynamic Island, side buttons, status bar and home indicator.
Command Palette
Search for a command to run...
Search for a command to run...
A pixel-perfect iPhone Pro mockup with Dynamic Island, side buttons, status bar and home indicator.
Drop any app UI inside the mockup to make landing pages, marketing screenshots and product demos feel native. The chassis dimensions, bezel radius, Dynamic Island, side buttons, status bar icons and home indicator all match real iPhone Pro proportions.
npx shadcn@latest add https://ui.heygaia.io/r/iphone-mockup.jsonimport { IPhoneMockup } from "@/components/ui/iphone-mockup";
export default function Example() {
return (
<IPhoneMockup time="9:41">
<div className="flex flex-1 items-center justify-center">
Your app here
</div>
</IPhoneMockup>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
time | string | "9:41" | Status bar clock value. |
screenBackground | string | "#ffffff" | CSS color for the screen background; used to auto-tint the status bar. |
statusBarTone | "auto" | "light" | "dark" | "auto" | Status bar icon/text tint. |
hideStatusBar | boolean | false | Hide the built-in status bar (let your app draw its own). |
homeIndicator | boolean | true | Show the bottom home indicator bar. |
homeIndicatorTone | "auto" | "light" | "dark" | "auto" | Tint for the home indicator. |
className | string | – | Extra classes for the outer chassis. |
screenClassName | string | – | Extra classes for the inner screen. |
children | React.ReactNode | – | App content rendered inside the screen. |