Device Mockup
CSS-only phone, tablet and browser frames for screenshots.
displayCSS
Customize
Device
Device
Width240px
Screen
Camera cutout
Phone frames only.
Address bar
Browser frames only.
Glass glare
Finish
Finish
Drop shadow
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "phone" | "browser" | "tablet" | "phone" | Which device chrome to draw. |
frame | "graphite" | "silver" | "midnight" | "graphite" | Hardware finish of the frame. |
notch | "island" | "notch" | "none" | "island" | Camera cutout style (phone only). |
url | string | "ononc.dev" | Address-bar text (browser only). |
width | number | per device | Frame width in pixels; height follows the device aspect ratio. |
shadow | boolean | true | Soft drop shadow beneath the device. |
glare | boolean | false | Diagonal glass reflection across the screen. |
children | ReactNode | — | Screen content; a neutral placeholder renders when omitted. |