Device Mockup
betaA phone, tablet, laptop or browser window drawn in CSS around a screenshot or live UI, with an optional 3D tilt.
- Display
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add device-mockupnpm packages installed: class-variance-authority.
import { DeviceMockup } from "@/components/ui/device-mockup";Phone
Tablet
Laptop
Browser
Tilted
<DeviceMockup>
| Prop | Type | Default |
|---|---|---|
captionA visible caption under the device. | ReactNode | — |
device | "phone" | "tablet" | "laptop" | "browser" | "phone" |
orientationTablets only: on its side. Default "portrait". | "portrait" | "landscape" | "portrait" |
screenClassNameClass for the screen area. | string | — |
tiltTurn it in 3D. Straightens on hover and focus. Default "none". | keyof typeof TILTS | "none" |
urlBrowser only: the address shown in the bar. | string | — |
childrenWhat is on the screen. | ReactNode | — |
Plus every attribute of <figure> except children.
A figure; the frame, notch, camera and window controls are aria-hidden decoration, and the screen keeps the roles and focus order of whatever is inside — give a screenshot real alt text. A tilted device straightens on hover and when focus moves inside it, on the motion scale, so under reduced motion it simply switches. The browser's address is plain text. A caption is visible, not hidden.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes