iPhone

A responsive iPhone frame component that wraps any content inside a realistic iPhone 18 Pro or 18 Pro Max display, with portrait and landscape orientations.

iphone-01

import { IPhone } from "@/components/ui/apple/iphone"

export function IPhone01() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <IPhone size="md" color="silver">
      <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IPhone>
    </div>
  )
}

iphone-02

"use client"

import { useState } from "react"
import { IPhone } from "@/components/ui/apple/iphone"

type IPhoneVariant = "18-pro" | "18-pro-max"

type IPhoneColor =
  | "black"
  | "glacier"
  | "silver"
  | "burgundy"

const colorOptions: Record<
  IPhoneVariant,
  { value: IPhoneColor; label: string }[]
> = {
  "18-pro": [
    { value: "black", label: "Black" },
    { value: "glacier", label: "Glacier" },
    { value: "silver", label: "Silver" },
    { value: "burgundy", label: "Burgundy" },
  ],

  "18-pro-max": [
    { value: "black", label: "Black" },
    { value: "glacier", label: "Glacier" },
    { value: "silver", label: "Silver" },
    { value: "burgundy", label: "Burgundy" },
  ],
}

export function IPhoneVariantDemo() {
  const [variant, setVariant] =
    useState<IPhoneVariant>("18-pro")

  const [color, setColor] =
    useState<IPhoneColor>("silver")

  const handleVariantChange = (
    newVariant: IPhoneVariant
  ) => {
    setVariant(newVariant)
  }

  return (
    <div className="flex flex-col items-center justify-center gap-10 p-8">

      {/* Model Tabs */}
      <div className="flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        <button
          onClick={() => handleVariantChange("18-pro")}
          className={`rounded-md px-5 py-2 text-sm font-medium transition-all ${
            variant === "18-pro"
              ? "bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white"
              : "text-gray-500 hover:text-gray-900 dark:text-zinc-400 dark:hover:text-zinc-100"
          }`}
        >
          iPhone 18 Pro
        </button>

        <button
          onClick={() => handleVariantChange("18-pro-max")}
          className={`rounded-md px-5 py-2 text-sm font-medium transition-all ${
            variant === "18-pro-max"
              ? "bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white"
              : "text-gray-500 hover:text-gray-900 dark:text-zinc-400 dark:hover:text-zinc-100"
          }`}
        >
          iPhone 18 Pro Max
        </button>
      </div>

      {/* Color Options */}
      <div className="flex flex-wrap items-center justify-center gap-2">
        {colorOptions[variant].map((option) => (
          <button
            key={option.value}
            onClick={() => setColor(option.value)}
            className={`rounded-full border px-4 py-2 text-xs font-medium transition-all ${
              color === option.value
                ? "border-foreground bg-foreground text-background"
                : "border-border bg-background text-muted-foreground hover:text-foreground"
            }`}
          >
            {option.label}
          </button>
        ))}
      </div>

      {/* iPhone */}
      <IPhone
        variant={variant}
        color={color} 
      >
        <video
          src="/vid/colorful-spheres.mp4"
          autoPlay
          loop
          muted
          playsInline
          className="h-full w-full object-cover"
        />
      </IPhone>
    </div>
  )
}

iphone-03

Medium

"use client"

import { useState } from "react"
import { IPhone } from "@/components/ui/apple/iphone"

type IPhoneSize = "sm" | "md" | "lg" | "xl"

export function IPhoneSizeDemo() {
  const [size, setSize] =
    useState<IPhoneSize>("md")

  const options: {
    value: IPhoneSize
    label: string
  }[] = [
    { value: "sm", label: "Small" },
    { value: "md", label: "Medium" },
    { value: "lg", label: "Large" },
    { value: "xl", label: "Extra Large" },
  ]

  return (
    <div className="flex flex-col items-center justify-center gap-12 p-8">

      {/* Size Tabs */}
      <div className="flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        {options.map((option) => (
          <button
            key={option.value}
            onClick={() => setSize(option.value)}
            className={`rounded-md px-4 py-2 text-sm font-medium transition-all ${
              size === option.value
                ? "bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white"
                : "text-gray-500 hover:text-gray-900 dark:text-zinc-400 dark:hover:text-zinc-100"
            }`}
          >
            {option.label}
          </button>
        ))}
      </div>

      {/* iPhone */}
      <IPhone
        size={size}
        variant="18-pro"
        color="silver"
      >
        <div className="flex h-full items-center justify-center">
          <span className="text-2xl font-semibold">
            {options.find(
              (option) => option.value === size
            )?.label}
          </span>
        </div>
      </IPhone>

    </div>
  )
}

iphone-04

"use client"

import { useState } from "react"
import { IPhone } from "@/components/ui/apple/iphone"

type Orientation = "portrait" | "landscape"

export function IPhoneOrientationDemo() {
  const [orientation, setOrientation] =
    useState<Orientation>("portrait")

  return (
    <div className="flex flex-col items-center justify-center gap-12 p-8">

      {/* Orientation Tabs */}
      <div className="flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        <button
          onClick={() => setOrientation("portrait")}
          className={`rounded-md px-5 py-2 text-sm font-medium transition-all ${
            orientation === "portrait"
              ? "bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white"
              : "text-gray-500"
          }`}
        >
          Portrait
        </button>

        <button
          onClick={() => setOrientation("landscape")}
          className={`rounded-md px-5 py-2 text-sm font-medium transition-all ${
            orientation === "landscape"
              ? "bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white"
              : "text-gray-500"
          }`}
        >
          Landscape
        </button>
      </div>

      {/* iPhone */}
      <IPhone
        variant="18-pro"
        color="burgundy"
        size="lg"
        orientation={orientation}
      >
        <video
          src="/vid/abstract-fluid.mp4"
          autoPlay
          loop
          muted
          playsInline
          className="h-full w-full object-cover"
        />
      </IPhone>

    </div>
  )
}

iphone-05

"use client"

import { useState } from "react"
import { IPhone } from "@/components/ui/apple/iphone"

type IPhoneColor =
  | "black"
  | "glacier"
  | "silver"
  | "burgundy"

const colors: {
  value: IPhoneColor
  label: string
}[] = [
  { value: "black", label: "Black" },
  { value: "glacier", label: "Glacier" },
  { value: "silver", label: "Silver" },
  { value: "burgundy", label: "Burgundy" },
]

export function IPhoneColorDemo() {
  const [color, setColor] =
    useState<IPhoneColor>("silver")

  return (
    <div className="flex flex-col items-center justify-center gap-10 p-8">

      <div className="flex flex-wrap items-center justify-center gap-2">
        {colors.map((option) => (
          <button
            key={option.value}
            onClick={() => setColor(option.value)}
            className={`rounded-full border px-4 py-2 text-xs font-medium transition-all ${
              color === option.value
                ? "border-foreground bg-foreground text-background"
                : "border-border bg-background text-muted-foreground hover:text-foreground"
            }`}
          >
            {option.label}
          </button>
        ))}
      </div>

      <IPhone
        variant="18-pro"
        color={color}
        orientation="landscape" 
      >
        <video
          src="/vid/colorful-spheres.mp4"
          autoPlay
          loop
          muted
          playsInline
          className="h-full w-full object-cover"
        />
      </IPhone>

    </div>
  )
}

Installation


pnpm dlx shadcn@latest add https://designali.com/r/iphone.json

Usage

import { IPhone } from "@/components/ui/iphone"

<IPhone>
  <div className="p-6">Your content here</div>
</IPhone>

Variant

<IPhone variant="18-pro-max">
  <div className="p-6">iPhone 18 Pro Max</div>
</IPhone>

Size

<IPhone size="lg">
  <div className="p-6">Large iPhone</div>
</IPhone>

Orientation

<IPhone orientation="landscape">
  <div className="p-6">Landscape iPhone</div>
</IPhone>

Color

<IPhone color="burgundy">
  <div className="p-6">Burgundy iPhone</div>
</IPhone>

Custom frame image

<IPhone>
  <div className="p-6">Custom frame</div>
</IPhone>

Props

Prop	Type	Default
`children`	`ReactNode`	—
`className`	`string`	—
`variant`	`"18-pro" \| "18-pro-max"`	`"18-pro"`
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`
`orientation`	`"portrait" \| "landscape"`	`"portrait"`
`color`	`"black" \| "glacier" \| "silver" \| "burgundy"`	`"silver"`

Notes

The screen area is an absolutely positioned container, so children scroll vertically inside it when they overflow.
The iPhone is sized by height, and the width follows from the aspect ratio (9/19.5 in portrait, 19.5/9 in landscape).
All four colors are available for both variants.
Passing image overrides variant, orientation and color for the frame.

iPhone Duo Macbook