# PhoneFrame

> Hardware chrome for a phone screenshot or live screen on a landing: an ink bezel in the proportions of a tall capture, and the screen's rounded corners, at the width the column gives it.

```ts
import { PhoneFrame } from "@sdxc/ui/landing";
```

The bezel around a phone screen. The capture carries its own status bar, so the frame
adds only the hardware rim.

## Examples

```tsx
<PhoneFrame bezel="#1a0830">
	<img src={shot} alt={t("phone.alt")} mix={[screenCorners()]} />
</PhoneFrame>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `bezel?` | `string` | Bezel fill. Defaults to `var(--app-bezel)` so a page can paint every phone from one token, then to DEFAULT_BEZEL when that token is unset. |
| `children` | `RemixNode` | The screen: a capture, a `picture`, or live UI, clipped with screenCorners. |

Also accepts everything in `TagProps<"div">`.


## Also exported

- `screenCorners`