iPhone 15 Pro
iPhone 15 Pro is a frame, not a picture: a rounded body, a ten-pixel bezel and a dynamic island, with a screen that keeps a 9:19.5 aspect ratio and clips whatever you put inside it.
Use it to show a mobile layout at a believable scale in a landing page or a docs example. The frame is pure CSS, so it scales with the width prop and follows the colour mode through the theme.
Usage
Everything in your pocket
Drop any content into the screen slot.
<template>
<div class="flex w-full items-center justify-center py-6">
<MIPhone15Pro>
<div class="flex h-full flex-col items-center justify-center gap-2 bg-gradient-to-b from-neutral-900 to-neutral-800 p-6 text-center text-white">
<p class="text-lg font-semibold">
Everything in your pocket
</p>
</div>
</MIPhone15Pro>
</div>
</template>
Customize
Everything in your pocket
Drop any content into the screen
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 280 | Width of the phone, in pixels. The screen keeps its aspect ratio, so the height follows. |
class | string | '' | CSS classes for the outer wrapper. |
Slots
| Slot | Props | Description |
|---|---|---|
default | - | Screen content. It is clipped to the screen's rounding, so fill it edge to edge and give it a height if it is not naturally tall. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.iPhone15Pro in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | relative mx-auto |
frame | - | relative rounded-[3rem] border-[10px] border-neutral-900 bg-neutral-950 shadow-2xl ring-1 ring-white/10 dark:border-neutral-700 dark:bg-neutral-800 |
screen | - | relative aspect-[9/19.5] overflow-hidden rounded-[2.35rem] bg-background |
island | - | pointer-events-none absolute left-1/2 top-2 z-10 h-6 w-24 -translate-x-1/2 rounded-full bg-neutral-950 |
Accessibility
The frame is decorative markup: the island is aria-hidden and pointer-events-none, and the screen is a plain div. Nothing is announced twice, and screen content keeps its own semantics — if it needs a label or a heading, add one inside the slot.