# DeviceFrame

> A screenshot in a phone, a landscape tablet or a browser window, drawn in CSS with the theme's colours; it scales as a whole and a dark screenshot swaps in with the theme.

URL: https://apogee.avaui.dev/docs/device-frame
Last updated: 2026-10-16

A screenshot in a phone, a landscape tablet or a browser window, drawn in CSS with the theme's colours; it scales as a whole and a dark screenshot swaps in with the theme.

Last updated October 16, 2026

```astro
<DeviceFrame device="phone" src="/mockups/app-phone-light.jpg" srcDark="/mockups/app-phone-dark.jpg" alt="The dashboard on a phone" />
```

## Add

```sh
npx @ava-ui/apogee add device-frame
```

Pulls in Image. Zero JS.

## Usage

```astro
---
import DeviceFrame from '@/components/apogee/DeviceFrame/DeviceFrame.astro'
import shot from '../assets/app.png'
---
<DeviceFrame device="browser" src={shot} alt="The reports page" address="app.example.com/reports" />
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `device` | `'phone' \| 'tablet' \| 'browser'` | `'phone'` | A portrait phone, a landscape tablet, or a browser window with an address bar. |
| `src` | `ImageMetadata \| string` | — | The screenshot. Or put any content in the default slot. |
| `srcDark` | `ImageMetadata \| string` | — | A dark-mode screenshot, shown when the page is dark. |
| `alt` | `string` | `''` | What the screenshot shows; empty when it only decorates. |
| `address` | `string` | `'app.example.com'` | The browser’s address bar text. |
| `width` / `height` | `number` | phone 786 × 1596, tablet 1180 × 796, browser 1440 × 900 | Screenshot size in pixels, for the space reserved before it loads. |
| `class` | `string` | — | Size it with a width (`w-64`, `max-w-3xl`); everything else scales with it. |

## Sizing

Every part of the frame (bezel, corners, buttons, status bar, address bar) is sized in container units of the frame’s own width, so a frame keeps its proportions at any size: give it a width and the whole device shrinks or grows. The address bar text has a floor so it stays legible on a small frame.

The content area has a fixed shape. A screenshot of that shape shows uncut:

| Device | Content area | Capture at |
| --- | --- | --- |
| `phone` | 393 : 798 | 393 × 798 at 2x (an iPhone screen below its status bar) |
| `tablet` | 1180 : 796 | 1180 × 796 (an iPad in landscape below its status bar) |
| `browser` | 16 : 10 | 1440 × 900 |

## Variants

Every `device`:

```astro
<DeviceFrame device="browser" src="/mockups/app-desktop-light.jpg" srcDark="/mockups/app-desktop-dark.jpg" alt="The dashboard in a browser" />
```

```astro
<DeviceFrame device="tablet" src="/mockups/app-tablet-light.jpg" srcDark="/mockups/app-tablet-dark.jpg" alt="The dashboard on a tablet" />
```

The same frames, smaller. Each scales as a whole:

```astro
<DeviceFrame device="browser" class="w-72" … />
<DeviceFrame device="tablet" class="w-72" … />
<DeviceFrame device="phone" class="w-28" … />
```

## States

-   **Dark mode** — `srcDark` replaces `src` when the page is dark; the frame itself follows the theme tokens.

## Examples

Phone and browser mockups in blocks: [CTA sections](https://apogee.avaui.dev/docs/cta-sections), [Hero sections](https://apogee.avaui.dev/docs/hero-sections).

## Accessibility

-   The frame’s buttons, camera, status bar and toolbar are decoration and hidden from screen readers; only the screenshot’s `alt` is read.
-   Write the `alt` for what the screenshot shows, or leave it empty when the text beside it already says it.

## Tokens

| Token | Used for |
| --- | --- |
| `--background-inverted` | Phone and tablet body, buttons, camera and home bar |
| `--background-page` / `--foreground-neutral` | Screen and status bar; address pill |
| `--background-neutral-faded` / `--border-neutral-faded` | Browser window and its edge |
| `--border-neutral` | Device edge; browser dots |

## Do / Don’t

-   **Do** use a real screenshot of your product, light and dark.
-   **Don’t** put text the reader needs only inside the screenshot.

## Content

-   Crop to the part of the screen the heading talks about.

## Related

[

ImageA responsive, lazy-loaded image — wraps astro:assets Image with sensible defaults.

](https://apogee.avaui.dev/docs/image)[

AspectRatioLocks its content to a fixed width-to-height ratio — media, embeds, maps.

](https://apogee.avaui.dev/docs/aspect-ratio)[

CardA surface container for grouped content. Compose freely inside — heading, text, button, an optional media block.

](https://apogee.avaui.dev/docs/card)