Device Morph
One frame that morphs between desktop, tablet and phone. Show a screenshot per device, or live content that reflows with container queries.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/device-morphProps
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Live content instead of screenshots. The screen is a container, so @md: and other container-query classes reflow it. |
src | string | - | One screenshot for every device. |
sources | Partial<Record<"desktop" | "tablet" | "phone", string>> | - | A screenshot per device; missing devices fall back to src. |
alt | string | "" | Alt text for the screenshot. |
device | "desktop" | "tablet" | "phone" | - | Controlled device. |
defaultDevice | "desktop" | "tablet" | "phone" | "desktop" | Device shown first. |
onDeviceChange | (device: Device) => void | - | Called when the device changes. |
autoPlay | boolean | false | Cycles through the devices while on screen and not hovered or focused. Stops once the visitor picks a device, and never runs with reduced motion. |
interval | number | 3500 | Milliseconds per device when autoPlay is on. |
showControls | boolean | true | Shows the device switcher. |
url | string | "yourwebsite.com" | Text in the desktop address bar. |
imageAs | React.ElementType | "img" | Component used for screenshots, e.g. next/image's Image. It receives src, alt, loading and className. |
className | string | - | Extra classes for the root element. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the root element. |