A
Auralix UI

IPhoneMockup

iPhone device frame with Dynamic Island.

Preview

9:41
Your App

Installation

bash
npx auralix-ui add iphone-mockup

Usage

iPhone Preview

tsx
import { IPhoneMockup } from "@/components/ui/IPhoneMockup";

<IPhoneMockup>
  <div className="bg-white h-full">
    Your app content
  </div>
</IPhoneMockup>

Props

NameTypeDefaultDescription
childrenReactNode-Screen content.
variant"silver" | "space-gray" | "gold""space-gray"Device color.
showNotchbooleantrueShow Dynamic Island.
showStatusBarbooleantrueShow status bar.