Phone Mockup

Fetch pattern JSON: curl https://webspire.de/patterns/mockup/phone.json

phone.html

<div class="ws-mockup not-prose mx-auto w-56">

  <!-- Phone body -->
  <div class="overflow-hidden rounded-[2.75rem] border-[5px] border-[var(--ws-mockup-border)] bg-[var(--ws-mockup-screen-bg)] shadow-2xl">

    <!-- Status bar with Dynamic Island -->
    <div class="bg-[var(--ws-mockup-chrome)] px-5 pb-2 pt-3">
      <div class="flex items-center justify-between">
        <span class="text-[11px] font-semibold text-[var(--ws-mockup-chrome-text)]">9:41</span>
        <div class="h-4 w-14 rounded-full bg-[var(--ws-mockup-border)]"></div>
        <span class="text-[11px] font-semibold text-[var(--ws-mockup-chrome-text)]">100%</span>
      </div>
    </div>

    <!-- Screen area -->
    <div class="aspect-[9/17] flex items-center justify-center bg-[var(--ws-mockup-screen-bg)]">
      <span class="text-xs text-[var(--ws-mockup-chrome-text)]">Replace with screenshot</span>
    </div>

    <!-- Home indicator -->
    <div class="flex justify-center bg-[var(--ws-mockup-screen-bg)] py-2">
      <div class="h-1 w-20 rounded-full bg-[var(--ws-mockup-chrome-text)] opacity-30"></div>
    </div>

  </div>

</div>

Details

Family

mockup

Tier

base

Kind

component

Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

mockupphonemobileshowcasepreviewiphonescreenshotapp

Slots

Name	Required	Description
screen	Yes	Content displayed inside the phone screen area — typically an img with a mobile screenshot

A minimal phone frame with a dynamic island notch, status bar, and home indicator. Adapts to light/dark mode via Webspire tokens.

App screenshot

<div class="ws-mockup not-prose mx-auto w-56">
  <div class="overflow-hidden rounded-[2.75rem] border-[5px] ...">
    <!-- status bar ... -->
    <div class="aspect-[9/17]">
      <img src="/mobile-screenshot.png" alt="Mobile app preview" class="h-full w-full object-cover" />
    </div>
    <!-- home indicator ... -->
  </div>
</div>