Device Frame
Browser, phone, tablet and laptop frames to present screenshots or live UI, in light, dark or theme tones with optional 3D tilt.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| device | "browser" | "phone" | "tablet" | "laptop" | "browser" | Which frame to draw. |
| tone | "light" | "dark" | "auto" | "auto" | Frame colour; auto follows the theme. |
| src / alt | string | — | Screenshot URL and its text alternative; or pass children as the screen. |
| tabs / url | string[] / string | ["New tab"] / "example.com" | Browser only: tab titles (first active) and the address. |
| aspect | number | 16 / 10 | Screen width / height for browser and laptop. |
| tilt | "none" | "left" | "right" | "none" | 3D tilt that settles flat on hover. |
| caption | ReactNode | — | Text under the frame. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.