Browser Mockup

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

browser.html

<div class="ws-mockup not-prose mx-auto w-full max-w-3xl">

  <!-- Browser chrome -->
  <div class="rounded-t-xl border border-b-0 border-[var(--ws-mockup-border)] bg-[var(--ws-mockup-chrome)] px-4 pb-3 pt-4">
    <div class="flex items-center gap-3">

      <!-- Traffic lights -->
      <div class="flex shrink-0 items-center gap-1.5">
        <span class="block h-3 w-3 rounded-full bg-[var(--ws-mockup-dot-red)]"></span>
        <span class="block h-3 w-3 rounded-full bg-[var(--ws-mockup-dot-yellow)]"></span>
        <span class="block h-3 w-3 rounded-full bg-[var(--ws-mockup-dot-green)]"></span>
      </div>

      <!-- URL bar -->
      <div class="flex flex-1 items-center gap-2 rounded-md bg-[var(--ws-mockup-url-bg)] px-3 py-1.5">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 shrink-0 text-[var(--ws-mockup-chrome-text)]" aria-hidden="true">
          <rect x="3" y="11" width="18" height="11" rx="2"></rect>
          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
        </svg>
        <span class="truncate text-xs text-[var(--ws-mockup-chrome-text)]">yoursite.com</span>
      </div>

    </div>
  </div>

  <!-- Screen -->
  <div class="overflow-hidden rounded-b-xl border border-[var(--ws-mockup-border)] bg-[var(--ws-mockup-screen-bg)] shadow-xl">
    <div class="flex aspect-video items-center justify-center">
      <span class="text-sm text-[var(--ws-mockup-chrome-text)]">Replace with screenshot or content</span>
    </div>
  </div>

</div>

Details

Family

mockup

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

mockupbrowsershowcasepreviewscreenshotchromeframe

Slots

Name	Required	Description
screen	Yes	Content displayed inside the browser screen area — typically an img or a live HTML preview

A minimal browser chrome for showcasing screenshots, UI previews, and product demos. Uses Webspire component tokens so it adapts to light/dark mode automatically.

Screenshot showcase

Replace the placeholder with an <img> tag:

<div class="ws-mockup not-prose mx-auto w-full max-w-3xl">
  <!-- chrome ... -->
  <div class="overflow-hidden rounded-b-xl border ...">
    <img src="/screenshot.png" alt="App preview" class="w-full" />
  </div>
</div>