Presents HTML, images, and live iframe demos in responsive device silhouettes.
See it and copy it
Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.
THE DEVICE COLLECTION
One Lumen workspace. Six familiar forms. Pick a device and compare.
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import { DeviceFrame } from '@santi020k/lumen-astro'
---
<DeviceFrame device="macbook-pro" color="white">
<iframe
src="/device-frame-demo"
title="Lumen component workspace"
loading="lazy"
sandbox=""
></iframe>
</DeviceFrame>import { DeviceFrame } from '@santi020k/lumen-react'
export const Example = () => (
<>
<DeviceFrame device="macbook-pro" color="white">
<iframe
src="/device-frame-demo"
title="Lumen component workspace"
loading="lazy"
sandbox=""
></iframe>
</DeviceFrame>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-device-frame device="macbook-pro" color="white">
<iframe
src="/device-frame-demo"
title="Lumen component workspace"
loading="lazy"
sandbox=""></iframe>
</lumen-device-frame>For screenshots and product artwork. Give the image meaningful alt text and match its aspect ratio to the frame.
For real components and interactive controls. Content shares the page viewport; use container queries to adapt to the frame.
For a complete responsive app. The page inside gets the device viewport, then scales to fit the available space.
Import DeviceFrame and the components in your example from @santi020k/lumen-astro. The framework example above includes React and Elements usage.
<DeviceFrame device="iphone" color="black" scroll={false}>
<Image src="/screens/mobile.png" alt="Your app's home screen" />
</DeviceFrame><DeviceFrame device="pixel" color="#a9b8ac">
<Card>
<h2>Welcome to your workspace</h2>
<Button>Start a project</Button>
</Card>
</DeviceFrame><DeviceFrame device="ipad-pro" orientation="landscape" color="white">
<iframe
src="/demo"
title="Interactive application demo"
loading="lazy"
sandbox=""
></iframe>
</DeviceFrame>The frame fills its parent up to a device-specific maximum. Set the parent width to size the mockup. For an iframe, screenWidth and screenHeight set its internal layout viewport; shrinking the frame does not change its media queries. Preset sizes are demo viewports, not hardware specifications.
Choose device="macbook-pro" for the notched, fuller enclosure or device="macbook-air" for the slim, tapered design. Use orientation="landscape" for iPad Pro. Use color="white", color="black", or a hex color for the hardware; your content keeps its own theme. scroll={false} clips HTML overflow, while an iframe manages its own scrolling.
Always title an iframe. The examples use sandbox="" for a static demo; enable only the permissions your embedded app needs. Some sites block embedding, so use an embeddable route you control. Camera details stay outside live content and never capture pointer input.
Choose your target
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add DeviceFramelumen add DeviceFramepnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add DeviceFrame --target reactlumen add DeviceFrame --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add DeviceFrame --target elementslumen add DeviceFrame --target elementsLumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.
| Attribute | Values | Default | Description |
|---|---|---|---|
| device | "macbook-pro" | "macbook-air" | "imac" | "iphone" | "pixel" | "ipad-pro" | "laptop" | "desktop" | "android" | "tablet" | "laptop" | Selects a decorative device silhouette and default screen dimensions. |
| orientation | "portrait" | "landscape" | device default | Orders the screen dimensions for the requested orientation. |
| tone | "light" | "dark" | "dark" | Sets the shell tone independently of the content theme. |
| color | "white" | "black" | hex color | tone | Overrides the hardware finish. Accepts 3-, 4-, 6-, or 8-digit hex colors. Content keeps its own theme; invalid colors fall back to tone. CSS can override --ui-device-color. |
| screenWidth / screenHeight | number | device preset | Sets the iframe layout viewport in CSS pixels; scales it to the available frame width. Elements uses screen-width and screen-height. |
| scroll | boolean | true | Allows screen HTML to scroll. An iframe owns its own scrolling. |
| children | Astro slot | ReactNode | child nodes | required | Provide an Image, titled iframe, or HTML. HTML shares the host viewport; iframe media queries use the screen viewport. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |