184 Components
iPhone 16 Pro Mockup
MockupsArchitectural Apple iPhone 16 Pro hardware frame with an interactive spring-expanding Dynamic Island, 3D cursor parallax tilt, specular glass reflection, and titanium chassis finishes.
Monday, October 129:41
9:41
5G
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/i-phone16-pro-mockup.json"
Props
TypeScript props supported by <IPhone16ProMockup />.
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "natural" | "desert" | "black" | "white" | "natural" | Titanium chassis finish. |
| enableTilt | boolean | true | Enable 3D cursor tilt physics. |
| interactiveIsland | boolean | true | Allow clicking the Dynamic Island to expand into a Live Activity. |
| children | React.ReactNode | — | Custom screen content or screenshot. |
Key Features
- Interactive Dynamic Island that fluidly morphs with spring physics on click.
- Hardware-accurate titanium bezels, action button, and volume rocker.
- Realistic specular light glare overlay that tracks cursor coordinates.
- 4 titanium finishes: Natural, Desert, Black, and White Titanium.
- Accepts any React children (images, video, or interactive app UI).
Keyboard & Accessibility
- Gracefully respects prefers-reduced-motion by disabling 3D rotation and glare movement.
- Internal screen supports accessible screen reader markup.