Phone Frame

FreeNew

A modern phone drawn in CSS with a titanium band, side buttons, Dynamic Island, status bar and home indicator. Children render as the screen, laid out at phone resolution and scaled to fit.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

children

variant

src

alt

videoSrc

poster

screenWidth1

statusBar

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/phone-frame.json

Usage

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

<PhoneFrame screenWidth={390} className="w-[248px]">
  <AppScreen />
</PhoneFrame>

<PhoneFrame src="/app.png" alt="Acme app home screen" variant="black" />

Props

PhoneFrame

Prop	Type	Default	Description
`children`	`ReactNode`	-	Screen content, laid out below the status bar. Ignored when `src` or `videoSrc` is set.
`variant`	`"auto" \| "natural" \| "black"`	`"auto"`	Finish. `"auto"` is natural titanium in light mode and black in dark mode.
`src`	`string`	-	Image shown on the screen, cropped to fill it.
`alt`	`string`	`""`	Alternative text for `src`.
`videoSrc`	`string`	-	Muted, looping video shown on the screen. Paused under reduced motion.
`poster`	`string`	-	Poster image for `videoSrc`.
`screenWidth`	`number`	-	Lays children out at this width in CSS pixels (393 matches a 6.1" phone), then scales them to fit.
`statusBar`	`boolean`	`true`	Shows the status bar (time, signal, Wi-Fi, battery).
`time`	`string`	`"9:41"`	Time shown in the status bar.
`homeIndicator`	`boolean`	`true`	Shows the home indicator at the bottom of the screen.
`screenClassName`	`string`	-	Class names for the screen. Use `"dark"` to give the screen its own theme.

Also accepts all <div> props.

Notes

Set the size with className (for example w-[248px]); the frame keeps the phone's proportions.

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/phone-frame.json

Usage

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

<PhoneFrame screenWidth={390} className="w-[248px]">
  <AppScreen />
</PhoneFrame>

<PhoneFrame src="/app.png" alt="Acme app home screen" variant="black" />

Props

PhoneFrame

Prop	Type	Default	Description
`children`	`ReactNode`	-	Screen content, laid out below the status bar. Ignored when `src` or `videoSrc` is set.
`variant`	`"auto" \| "natural" \| "black"`	`"auto"`	Finish. `"auto"` is natural titanium in light mode and black in dark mode.
`src`	`string`	-	Image shown on the screen, cropped to fill it.
`alt`	`string`	`""`	Alternative text for `src`.
`videoSrc`	`string`	-	Muted, looping video shown on the screen. Paused under reduced motion.
`poster`	`string`	-	Poster image for `videoSrc`.
`screenWidth`	`number`	-	Lays children out at this width in CSS pixels (393 matches a 6.1" phone), then scales them to fit.
`statusBar`	`boolean`	`true`	Shows the status bar (time, signal, Wi-Fi, battery).
`time`	`string`	`"9:41"`	Time shown in the status bar.
`homeIndicator`	`boolean`	`true`	Shows the home indicator at the bottom of the screen.
`screenClassName`	`string`	-	Class names for the screen. Use `"dark"` to give the screen its own theme.

Also accepts all <div> props.

Notes

Set the size with className (for example w-[248px]); the frame keeps the phone's proportions.