DeviceFrame
A phone, tablet or browser bezel around a screen.
Harbour rebrand
12 of 14 done
Tideline mobile
Review
Projects
Harbour rebrand
Tideline mobile
Crew interviews
All clear
In context
Offline sync
Tasks stay on the phone until you are back on signal.
3 changes waiting
They sync when you reconnect.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
variant | "phone" | "tablet" | "browser" | undefined | No | phone |
children | ReactNode | Yes | — |
title | string | undefined | No | — |
caption | ReactNode | No | — |
statusBar | boolean | undefined | No | true |
homeIndicator | boolean | undefined | No | true |
Theming
The frame is sized to its content and shows it whole: an <img> child renders at width: 100%; height: auto, so a screenshot is never cropped or distorted. A status strip above and a home-indicator strip below keep an app's own header and tab bar clear of the rounded corners (statusBar={false} / homeIndicator={false} turn them off). Tokens: --rebar-device-frame-bezel-color, -bezel-width, -radius, -status-bg, -home-bg, -home-indicator, -punch-size, -max-width.
Accessibility
The bezel, camera, status strip, home-indicator strip and browser toolbar are decoration and are aria-hidden. The screen content is a sibling, not a child, of those pieces, so an image's alt text and any other content stay in the accessibility tree. The root is a real <figure>; caption renders a <figcaption>.
data-rebar-* attributes
data-rebar-component="device-frame" and data-rebar-variant (phone, tablet or browser) on the root; data-rebar-part values bezel, screen, notch, status-bar, home-indicator and toolbar (browser only).
Migrating to Ant Design
Not codemod-covered. Ant Design has no device-frame component; replace it with your own mockup asset or CSS.