The Phone

One component draws every handset in the library. This page covers the models, finishes, your own picture and the iPhone Duo.

Models

Finishes follow each model: for example Cosmic Orange, Deep Blue and Silver on the Pro, and Star White and Night Sky on the Duo.

Your picture

import { Phone } from "@/components/vibebox/phone";

<Phone model="iphone-17-pro" finish="deep-blue" image="/work/home-mobile.webp" imageAlt="The home page on a phone" className="w-[300px]" />

The picture covers the screen. For live content, pass children instead (a page in an iframe, a video, your own component).

The Duo

fold="open" shows the book with its hinge; fold="closed" shows the cover display like a slab phone. The same picture works in both; for the open book, use a landscape image (about 4:3).

Side and tilt

The Front and Back switch is built in; pass view to control it yourself or flipControl={false} to hide it. tilt leans the phone toward a mouse pointer by up to 12 degrees and is off with reduced motion.

Size

One width sets the whole drawing (container units): give the component a width with className. Everything scales sharply, with no images for the body.

Phone Frame or Phone?

Use Phone when the handset itself is the point, or to show a single screenshot. Use Phone Frame to pan a tall full-page capture on hover.