Browse components
iPhone Mockup
A realistic, pure-CSS titanium phone frame with dynamic island, side buttons, status bar and a moving glass glare that tilts toward the pointer. Renders any children or an image as the screen.
Installation
npx shadcn@latest add @glint-ui/iphone-mockupFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/iphone-mockup.json
Usage
import { IphoneMockup } from "@/components/ui/iphone-mockup";
<IphoneMockup color="natural" width={300}>
<YourAppScreen />
</IphoneMockup>
<IphoneMockup src="/screenshot.png" alt="App home screen" tilt={false} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "natural" | "black" | "white" | "blue" | "desert" | "natural" | Titanium finish. |
| width | number | 300 | Rendered width in px; everything scales. |
| tilt | boolean | true | Tilt toward the pointer in 3D. |
| tiltAmount | number | 14 | Max tilt in degrees. |
| glare | boolean | true | Diagonal glass reflection. |
| statusBar | "light" | "dark" | "none" | "light" | Status bar tone, or hide it. |
| time | string | "9:41" | Status bar time. |
| src | string | — | Screen image URL (when no children). |
| children | ReactNode | — | Any screen content. Fills the screen. |
| className | string | — | Extra classes for the root element. |