Device Mockup
CSS-only phone, tablet and browser frames for screenshots.
displayCSS
Styled with ONONC's design tokens — shadcn add installs them for you.
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. |