Terminal Mockup

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

terminal.html

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

  <!-- Terminal chrome -->
  <div class="rounded-t-xl bg-[oklch(0.16_0.01_275)] 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>

      <!-- Window title -->
      <span class="flex-1 text-center text-xs text-[oklch(0.5_0.01_275)]">bash — 80×24</span>

    </div>
  </div>

  <!-- Terminal output -->
  <div class="overflow-hidden rounded-b-xl bg-[oklch(0.1_0.01_275)] px-5 py-5 font-mono text-sm leading-7 shadow-2xl">
    <p>
      <span class="text-[oklch(0.6_0.18_145)]">~/project</span>
      <span class="text-[oklch(0.5_0.01_275)]"> (main) </span>
      <span class="text-[oklch(0.85_0.01_275)]">$ pnpm build</span>
    </p>
    <p class="text-[oklch(0.45_0.01_275)]">&nbsp;</p>
    <p class="text-[oklch(0.55_0.01_275)]">  <span class="text-[oklch(0.65_0.18_145)]">✓</span>  Building for production…</p>
    <p class="text-[oklch(0.55_0.01_275)]">  <span class="text-[oklch(0.65_0.18_145)]">✓</span>  Type checking passed</p>
    <p class="text-[oklch(0.55_0.01_275)]">  <span class="text-[oklch(0.65_0.18_145)]">✓</span>  1,247 modules transformed</p>
    <p class="text-[oklch(0.55_0.01_275)]">  <span class="text-[oklch(0.65_0.18_145)]">✓</span>  dist/index.html  <span class="text-[oklch(0.45_0.01_275)]">12.4 kB</span></p>
    <p class="text-[oklch(0.55_0.01_275)]">  <span class="text-[oklch(0.65_0.18_145)]">✓</span>  done in <span class="text-[oklch(0.78_0.14_75)]">842ms</span></p>
    <p class="text-[oklch(0.45_0.01_275)]">&nbsp;</p>
    <p>
      <span class="text-[oklch(0.6_0.18_145)]">~/project</span>
      <span class="text-[oklch(0.5_0.01_275)]"> (main) </span>
      <span class="text-[oklch(0.85_0.01_275)]">$ <span class="animate-pulse">▌</span></span>
    </p>
  </div>

</div>

Details

Family

mockup

Tier

enhanced

Kind

component

Extends

mockup/browser

Responsive Tailwind Only SSR Safe Copy & Paste

Stable Published

mockupterminalclibashdevelopercodedarkshowcase

Slots

Name	Required	Description
output	Yes	Terminal output lines — replace with your own commands and output

An always-dark terminal window for showcasing CLI tools, build pipelines, and developer workflows. Intentionally uses hardcoded dark values since terminals are always dark regardless of color scheme. Traffic-light dots use ws-mockup tokens.