English | 简体中文
Device profiles and a Web Component for rendering phone and tablet previews.
Install the frame package to render previews:
pnpm add @devicekit/frameInstall the data package by itself when you only need device profiles and size calculations:
pnpm add @devicekit/devicesRegister the custom element once, then use it in HTML:
import { defineDeviceFrame } from '@devicekit/frame'
defineDeviceFrame()<device-frame device="iPhone 16 Pro">
<iframe src="/preview" style="width: 100%; height: 100%; border: 0"></iframe>
</device-frame>- Choose from 171 iOS, Android, and HarmonyOS device profiles, including separate entries for both screens of folding devices.
- Render the device body, cutout, status bar, safe areas, and home indicator with
<device-frame>. - Add application chrome through the
navigation-bar,tab-bar, andoverlayslots. - Read resolved layout values through CSS custom properties, element properties, or the
contentrectchangeevent. - Use the custom element directly or import the React 18 and React 19 wrapper from
@devicekit/frame/react. - Rotate with the
orientationattribute. Safe areas, the status bar, and the home indicator follow.
| Package | Description |
|---|---|
@devicekit/devices (npm) |
Device profiles, safe-area calculations, viewport sizes, and user-agent generation. This package has no DOM dependency. |
@devicekit/frame (npm) |
The <device-frame> custom element and its React wrapper. |
The package READMEs contain the full API references.
171 profiles: 63 iOS, 86 Android, 22 HarmonyOS. Folding phones get one entry per screen.
| Manufacturer | Devices |
|---|---|
| Apple | 63 |
| Samsung | 42 |
| 34 | |
| Huawei | 22 |
| Motorola | 3 |
| Microsoft | 2 |
| OnePlus | 2 |
| LG | 1 |
| Nothing | 1 |
| Xiaomi | 1 |
Manufacturer counts are derived from device names because profiles do not have a manufacturer field. CLASSIC_DEVICES contains 19 commonly used profiles for shorter selectors.
<device-frame> requires Custom Elements and Shadow DOM. It can be used with plain HTML or frameworks that support custom elements. The optional React entry supports React 18 and 19.
The frame uses ResizeObserver to report automatic content rectangle updates. Call refreshContentRect() after changing a CSS transform or when ResizeObserver is unavailable. @devicekit/devices does not use DOM APIs and declares Node.js 20 or later.
pnpm install
pnpm build
pnpm test
pnpm lint
pnpm check-typesRun the demo locally with pnpm --filter @devicekit/frame demo.
See CONTRIBUTING.md before submitting a change. Report security issues using the process in SECURITY.md.
MIT