Docs·Phone Mockup

Phone Mockup

A precise iPhone-style device frame with custom screen content, image support, and an optional autoplay carousel or stacked showcase.

Installation

$pnpm dlx shadcn@latest add @spiderui/phone-mockup

Usage

API Reference

PropTypeDefault
srcOptional image rendered inside the phone screen.
string—
childrenCustom screen UI used when src is not provided.
ReactNode—
altAccessible description for the screen image.
string"Phone screen"
widthWidth of the phone frame.
string | number"100%"
imagesImage screens displayed by PhoneCarousel.
readonly ImageItem[]—
itemsOptional custom image or React content screens.
readonly PhoneCarouselItem[]—
variantSide-by-side carousel or layered phone stack.
"carousel" | "stack""carousel"
activeIndexControlled active screen index.
number—
defaultActiveIndexInitial index for an uncontrolled carousel.
number0
autoPlayAdvance screens automatically.
booleantrue
intervalMilliseconds between automatic transitions.
number3000
showControlsShow previous, pause, and next controls.
booleantrue
pauseOnHoverPause autoplay while the pointer is over the showcase.
booleantrue
onActiveIndexChangeCalled whenever navigation requests a new screen.
(index: number) => void—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
Behance app on iPhone
Notion app on iPhone
One app on iPhone
Reddit app on iPhone
import { PhoneCarousel, PhoneMockup } from "@/components/ui/phone-mockup"
const images = [
  { src: "/screens/home.png", alt: "Home screen" },
  { src: "/screens/music.png", alt: "Music player" },
  { src: "/screens/weather.png", alt: "Weather screen" },
]

export function Demo() {
  return (
    <PhoneCarousel
      images={images}
      interval={3500}
      className="max-w-3xl"
    />
  )
}