iPhone Duo

A responsive iPhone Duo frame component that wraps any content inside a realistic foldable iPhone display, with front, back and open views.

iphone-duo-01

import { IPhoneDuo } from "@/components/ui/apple/iphone-duo"

export function IPhoneDuoDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <IPhoneDuo>
      <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IPhoneDuo>
    </div>
  )
}

iphone-duo-02

import { IPhoneDuo } from "@/components/ui/apple/iphone-duo"

export function IPhoneDuoFrontDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <IPhoneDuo
        size="xl"
        side="front"
        orientation="portrait"
        color="night-sky"
      >
        <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IPhoneDuo>
    </div>
  )
}

iphone-duo-03

import { IPhoneDuo } from "@/components/ui/apple/iphone-duo"

export function IPhoneDuoBackDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <IPhoneDuo
        size="xl"
        side="back"
        orientation="portrait"
        color="night-sky"
      >
        <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IPhoneDuo>
    </div>
  )
}

iphone-duo-04

import { IPhoneDuo } from "@/components/ui/apple/iphone-duo"

export function IPhoneDuoFrontBackDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <IPhoneDuo
        size="xl"
        side="frontback"
        color="night-sky"
      >
        <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IPhoneDuo>
    </div>
  )
}

iphone-duo-05

import { IPhoneDuo } from "@/components/ui/apple/iphone-duo"

export function IPhoneDuoLandscapeDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <IPhoneDuo 
        side="front"
        orientation="landscape"
        color="night-sky"
      >
       <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IPhoneDuo>
    </div>
  )
}

iphone-duo-06

"use client"

import { useState } from "react"

import { IPhoneDuo } from "@/components/ui/apple/iphone-duo"

const colors = ["night-sky", "star-white"] as const

type PhoneColor = (typeof colors)[number]

export function IPhoneDuoColorsDemo() {
  const [activeColor, setActiveColor] =
    useState<PhoneColor>("night-sky")

  return (
    <div className="flex flex-col items-center justify-center gap-10 p-8">
      <div className="flex items-center justify-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        {colors.map((color) => (
          <button 
            key={color}
            onClick={() => setActiveColor(color)}
            className={`rounded-md px-4 py-2 text-sm font-medium capitalize transition-all duration-200 ${
              activeColor === color
                ? "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"
            }`}
          >
            {color.replace("-", " ")}
          </button>
        ))}
      </div>

      <IPhoneDuo
        size="xl" 
        color={activeColor}
      >
       <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IPhoneDuo>
    </div>
  )
}

iphone-duo-07

"use client"

import { useState } from "react"

import { IPhoneDuo } from "@/components/ui/apple/iphone-duo"

const sizes = ["sm", "md", "lg", "xl"] as const

type PhoneSize = (typeof sizes)[number]

export function IPhoneDuoSizeDemo() {
  const [activeSize, setActiveSize] = useState<PhoneSize>("md")

  return (
    <div className="flex flex-col items-center justify-center gap-10 p-8">
      <div className="flex items-center justify-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        {sizes.map((size) => (
          <button
            key={size}
            onClick={() => setActiveSize(size)}
            className={`rounded-md px-4 py-2 text-sm font-medium uppercase transition-all duration-200 ${
              activeSize === size
                ? "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"
            }`}
          >
            {size}
          </button>
        ))}
      </div>

      <IPhoneDuo
        size={activeSize}
        side="frontback"
        color="night-sky"
      >
       <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IPhoneDuo>
    </div>
  )
}

Installation


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

Usage

import { IPhoneDuo } from "@/components/ui/iphone-duo"

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

Size

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

Orientation

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

Side

<IPhoneDuo side="back" />

<IPhoneDuo side="frontback" className="h-[28rem] w-auto" />

Color

<IPhoneDuo color="star-white">
  <div className="p-6">Star White iPhone Duo</div>
</IPhoneDuo>

Custom frame image

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

Props

Prop	Type	Default
`children`	`ReactNode`	—
`className`	`string`	—
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`
`orientation`	`"portrait" \| "landscape"`	`"portrait"`
`side`	`"front" \| "back" \| "frontback"`	`"front"`
`color`	`"night-sky" \| "star-white"`	`"night-sky"`

Notes

The screen area is an absolutely positioned container, so children scroll vertically inside it when they overflow.
children are only rendered when side="front". The back and frontback views show the frame image only.
orientation is ignored when side="frontback".
With side="frontback", no size or aspect ratio classes are applied, so you must set the dimensions yourself with className (for example h-[28rem] w-auto).
Passing image overrides side, orientation and color for the frame.

iPad iPhone