Device previewPro
Render any component inside a phone, tablet, laptop, display, browser or watch, for docs and marketing.
On this page
ProThe same chatcn app on a phone, tablet, laptop, display and browser, with rotation and finishes.
Installation
Usage
import { DevicePreview } from "@/components/ui/chatcn/pro/device-preview"
<DevicePreview devices={["phone", "tablet", "laptop", "browser"]}>
<YourComponent />
</DevicePreview>The content renders at the device's real viewport, so a responsive component shows its phone layout on the phone and its desktop layout on the laptop. Pass a function to give each device its own content. The frame is fitted to the stage at the largest size that fits by width and by height, from the frames' own proportions, so switching never jumps.
A screen scaled far below 1x shrinks its controls under the 24 px minimum target. When a frame is a picture (a hero, a gallery card), set interactive={false}: the content stays visible but leaves the tab order and the accessibility tree.
Examples
One component, three devices
ProThe new chat screen on a phone in landscape, a watch with its own content, and a browser.
Props
| Prop | Type | Notes |
|---|---|---|
children | ReactNode | ({ device, orientation }) => ReactNode | |
devices | ("phone" | "tablet" | "laptop" | "monitor" | "browser" | "watch")[] | Offered in order. Default phone, tablet, laptop, browser |
device | DevicePreviewDevice | Controlled. defaultDevice, onDeviceChange |
orientation | "portrait" | "landscape" | Phone and tablet. Controlled or defaultOrientation |
finish | FrameFinish | Controlled or defaultFinish |
height | number | Stage height in px. Default 560 |
url | string | Shown on the browser |
toolbar | boolean | Default true |
interactive | boolean | Keep screens live. Default true |
screenClassName | string | For example dark |
Keyboard
| Key | Action |
|---|---|
| Arrow keys on the devices | Switch device |
| Arrow keys on the finishes | Pick a finish |
Enter / Space on Rotate | Turn the phone or tablet |
Accessibility
- Devices are tabs with visible names; the stage is their panel.
- Finishes are a radio group with a name per material.
- Rotate is a toggle button that reports landscape as pressed.
Motion
- A device picked with the pointer eases in from 0.96 in 220 ms; picked with the keyboard it switches at once.
- Rotation is the frames' own quarter turn, a fade under reduced motion.