# Phone frame (goodtabs UI)

A generic phone bezel drawn in hairlines, around a screenshot or live UI.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/phone-frame.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/phone-frame`

## Usage

```tsx
import { PhoneFrame } from "@/components/ui/phone-frame"

<PhoneFrame width="240px">
  <img src="/app.png" alt="The home screen" className="size-full object-cover" />
</PhoneFrame>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| width | `string` | `"260px"` | Maximum width of the whole bezel. The screen keeps a 9:19 ratio. |

## When to use

- Showing a mobile screen on a landing page or in docs
- Beside a browser frame to show the same product on two sizes

## When not to use

- When you need a specific device; this is deliberately generic
- Scrolling content that must stay inside; the screen clips without scrolling

## Notes for agents

- Server component; children fill an absolute inset-0 screen, so images want size-full object-cover
- The notch is a hairline pill, not a real cutout, and sits above children
- Colours are theme tokens only, so the frame follows light and dark mode

## The maths

- The screen is 9 : 19, a ratio of 0.474, close to a modern phone's 9 : 19.5.
- Radii nest: the outer corner is 36 = inner 28 + bezel 8, so the gap stays even around the curve.

Docs: https://ui.goodtabs.co/components/phone-frame