Phone Mockup
Phone chrome with Dynamic Island status bar for live app previews (children) or static screenshots (image). Mount any React screen inside the frame - like Expo or Android Studio device preview.
App preview
Live React UI with scrollable list - Expo / Android Studio style device preview.
My App
Device preview
- Home›
- Explore›
- Inbox›
- Settings›
- Profile›
- Notifications›
- Billing›
- Help›
Sign in to view this example's source code.
Sign inScreenshot (contain)
Static image scaled to width with blurred backdrop.
Sign in to view this example's source code.
Sign inScreenshot (cover)
Portrait ~9:16 image filling the frame with cover.
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | undefined | Live screen UI inside the device; scrollable viewport. Overrides image when provided |
| image | string | undefined | Screen image when children are not provided |
| imageAlt | string | "Screen content" | Accessible alt text for the screen image |
| imageFit | "contain" | "cover" | "contain" | contain shows the full screenshot (width-first); cover fills 9:19 for portrait assets |
| imagePosition | "top" | "center" | "bottom" | "top" | Focal point when imageFit is cover |
| imageBackdrop | boolean | true | Blurred fill behind contain images |
| showStatusBar | boolean | true | iOS-style status bar with centered Dynamic Island |
| statusBarTime | string | "9:41" | Time displayed in the status bar |
| showHomeIndicator | boolean | true | Show bottom home indicator |
| viewportClassName | string | undefined | Extra classes on the scrollable screen viewport (children mode) |
| screenScrollable | boolean | true when children | Enable vertical scroll inside the screen when using children |
| className | string | undefined | Classes for the outer frame container |