iPhone Frame
newA modern iPhone drawn in CSS, with the screen left to you.
9:41
MC
Good morning
Mia Chen
Total balance
$12,480.32
+2.4%this week
Send
Request
Top up
Cards
Recent activity
See allSP−$45.00
Studio Pro
Subscription
LO+$38.50
Lena Ortiz
Dinner split
CC−$6.20
Corner Café
Coffee
Installation
npx shadcn@latest add @blank/iphone-frameUsage
import { IPhoneFrame } from "@/components/ui/iphone-frame"<IPhoneFrame className="w-72" src="/app-screenshot.png" alt="Wallet app" />Pass a screenshot through src, or any React tree as children. Size the frame
with a width class only: the height follows from the device's real aspect
ratio, and the rim, bezel, corner radii and Dynamic Island are measured in
container units, so the proportions hold from a thumbnail to a hero.
Examples
Sizes
Screen content can use the same container units. Measured in cqw, it scales
with the frame like a screenshot would, instead of reflowing.
Tuesday, October 13
9:41
Tuesday, October 13
9:41
Tuesday, October 13
9:41