iPhone Mock
Present screenshots or live components inside a realistic iPhone frame with Dynamic Island, classic notch, or notch-free presets and light/dark device bodies.
Pro features
What the Pro version adds to this component.
Realistic Frame
Token-based device body with side buttons, rounded screen, and drop shadow.
Notch Presets
Dynamic Island, classic notch, or notch-free — switchable with a single prop.
Screenshot Showcase
Drop in an image via src to frame product screenshots edge to edge.
Live Children
Render real, interactive MoonUI components inside the screen area.
Light & Dark Body
Silver or space-gray device body that adapts to your presentation.
Responsive Scaling
Percentage-based radii keep proportions crisp at any width you choose.
Decorative & Accessible
Frame is aria-hidden while screen content stays in the accessibility tree.
Installation
Install via CLI
npx @moontra/moonui-cli add iphone-mockUsage
Examples
Screenshot: Light & Dark Body
Showcase an app screenshot inside both light (silver) and dark (space gray) device bodies via the mode prop.
Notch Variants
Switch the top cutout with the notch prop: modern Dynamic Island, classic notch, or notch-free full screen.
Live Content
Pass real MoonUI components as children to render an interactive composition inside the screen instead of a static image.