Device Mockup
Safari / iPhone / Android device frames with a 3D hover tilt, floating, and a reveal animation.
Puts any content (a screenshot, live UI) inside a Safari desktop browser frame or an iPhone / Android phone frame, complete with a 3D tilt that follows the cursor and a glass highlight.
Loading preview…
npx shadcn@latest add https://webberui.com/r/device-mockup.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
12
<DeviceMockup />
Installation
npx shadcn@latest add https://webberui.com/r/device-mockup.jsonOr, once registries are configured in components.json, install it as @webberui/device-mockup.
Usage
import { DeviceMockup } from "@/components/ui/device-mockup";
<DeviceMockup variant="safari" url="webberui.com" className="w-[420px]">
<img src="/screenshot.png" alt="App" className="h-full w-full object-cover" />
</DeviceMockup>;Setting variant to "iphone" or "android" switches to a phone frame; the phone frames have a fixed width, while safari takes its width from the outer className (such as w-[420px]).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "safari" | "iphone" | "android" | "safari" | Device frame style |
url | string | "webberui.com" | Text in the Safari address bar (not shown on phones) |
tilt | number | 12 | Maximum 3D tilt angle on hover (deg); set 0 to turn it off |
float | boolean | false | Float continuously up and down |
reveal | boolean | true | Fade in and float up the first time it enters the viewport |
children | ReactNode | — | The screen content |
className | string | — | Applied to the outermost container (controls the width) |
screenClassName | string | — | Applied to the screen content frame (background, padding) |
Accessibility
- When the user has "reduce motion" enabled at the system level, the tilt, the floating, and the reveal animation are turned off and it is presented statically
- The tilt is only triggered by a mouse pointer, so touch devices are unaffected
- The decorative frame elements are all marked
aria-hidden, so they do not interfere with announcing the screen content