code-preview install terminal cli dark tabs copy developer npm brew powershell install cli terminal dark tabs copy npm brew powershell curl developer install command block with OS tabs platform-specific install instructions terminal card CLI install block with macOS Linux Windows tabs
Code Preview Install Block
Fetch pattern JSON:
curl https://webspire.de/patterns/code-preview/install-block.json install-block.html
<!-- Standalone install block — dark terminal card, CSS-only OS tabs -->
<div class="ws-code-preview not-prose mx-auto max-w-xl overflow-hidden rounded-2xl border border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-bg)]">
<!-- Radio inputs (CSS-only tab switch) -->
<input type="radio" name="install-os" id="ios-mac" class="peer/mac sr-only" checked>
<input type="radio" name="install-os" id="ios-linux" class="peer/linux sr-only">
<input type="radio" name="install-os" id="ios-win" class="peer/win sr-only">
<input type="radio" name="install-os" id="ios-npm" class="peer/npm sr-only">
<!-- Tab bar -->
<div class="flex items-center gap-1 border-b border-[var(--ws-code-preview-border)] px-4 py-2">
<!-- Traffic lights (decorative) -->
<span class="mr-3 flex gap-1.5">
<span class="h-2.5 w-2.5 rounded-full bg-slate-700"></span> <!-- ws-ok -->
<span class="h-2.5 w-2.5 rounded-full bg-slate-700"></span> <!-- ws-ok -->
<span class="h-2.5 w-2.5 rounded-full bg-slate-700"></span> <!-- ws-ok -->
</span>
<label for="ios-mac"
class="cursor-pointer rounded-md px-3 py-1 text-xs font-medium text-[var(--ws-code-preview-text-muted)] transition hover:text-[var(--ws-code-preview-text)] peer-checked/mac:bg-[var(--ws-code-preview-tab-active-bg)] peer-checked/mac:text-[var(--ws-code-preview-text)]">
macOS
</label>
<label for="ios-linux"
class="cursor-pointer rounded-md px-3 py-1 text-xs font-medium text-[var(--ws-code-preview-text-muted)] transition hover:text-[var(--ws-code-preview-text)] peer-checked/linux:bg-[var(--ws-code-preview-tab-active-bg)] peer-checked/linux:text-[var(--ws-code-preview-text)]">
Linux
</label>
<label for="ios-win"
class="cursor-pointer rounded-md px-3 py-1 text-xs font-medium text-[var(--ws-code-preview-text-muted)] transition hover:text-[var(--ws-code-preview-text)] peer-checked/win:bg-[var(--ws-code-preview-tab-active-bg)] peer-checked/win:text-[var(--ws-code-preview-text)]">
Windows
</label>
<label for="ios-npm"
class="cursor-pointer rounded-md px-3 py-1 text-xs font-medium text-[var(--ws-code-preview-text-muted)] transition hover:text-[var(--ws-code-preview-text)] peer-checked/npm:bg-[var(--ws-code-preview-tab-active-bg)] peer-checked/npm:text-[var(--ws-code-preview-text)]">
npm
</label>
</div>
<!-- macOS panel -->
<div class="hidden peer-checked/mac:block">
<div class="px-5 py-5">
<p class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-code-preview-text-muted)]">Install via Homebrew</p>
<div class="flex items-center justify-between rounded-lg bg-slate-900/50 px-4 py-3">
<code class="font-mono text-sm text-emerald-400">brew install myapp</code>
<button type="button" aria-label="Copy"
class="ml-4 rounded p-1 text-[var(--ws-code-preview-text-muted)] transition hover:text-[var(--ws-code-preview-text)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/></svg>
</button>
</div>
<p class="mt-2.5 mb-1 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-code-preview-text-muted)]">Or via shell script</p>
<div class="flex items-center justify-between rounded-lg bg-slate-900/50 px-4 py-3">
<code class="font-mono text-sm text-emerald-400">curl -fsSL https://myapp.dev/install.sh | bash</code>
<button type="button" aria-label="Copy"
class="ml-4 shrink-0 rounded p-1 text-[var(--ws-code-preview-text-muted)] transition hover:text-[var(--ws-code-preview-text)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/></svg>
</button>
</div>
</div>
</div>
<!-- Linux panel -->
<div class="hidden peer-checked/linux:block">
<div class="px-5 py-5">
<p class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-code-preview-text-muted)]">Install via shell script</p>
<div class="flex items-center justify-between rounded-lg bg-slate-900/50 px-4 py-3">
<code class="font-mono text-sm text-emerald-400">curl -fsSL https://myapp.dev/install.sh | bash</code>
<button type="button" aria-label="Copy"
class="ml-4 shrink-0 rounded p-1 text-[var(--ws-code-preview-text-muted)] transition hover:text-[var(--ws-code-preview-text)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/></svg>
</button>
</div>
<p class="mt-3 text-xs text-[var(--ws-code-preview-text-muted)]">
Supports Debian, Ubuntu, Fedora, and Arch. Run with <code class="text-[var(--ws-code-preview-text)]">sudo</code> if needed.
</p>
</div>
</div>
<!-- Windows panel -->
<div class="hidden peer-checked/win:block">
<div class="px-5 py-5">
<p class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-code-preview-text-muted)]">Install via PowerShell</p>
<div class="flex items-center justify-between rounded-lg bg-slate-900/50 px-4 py-3">
<code class="font-mono text-sm text-sky-400">irm https://myapp.dev/install.ps1 | iex</code>
<button type="button" aria-label="Copy"
class="ml-4 shrink-0 rounded p-1 text-[var(--ws-code-preview-text-muted)] transition hover:text-[var(--ws-code-preview-text)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/></svg>
</button>
</div>
<p class="mt-3 text-xs text-[var(--ws-code-preview-text-muted)]">
Run PowerShell as Administrator. Requires Windows 10 1607+ or Windows 11.
</p>
</div>
</div>
<!-- npm panel -->
<div class="hidden peer-checked/npm:block">
<div class="px-5 py-5">
<p class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-code-preview-text-muted)]">Global install via npm</p>
<div class="flex items-center justify-between rounded-lg bg-slate-900/50 px-4 py-3">
<code class="font-mono text-sm text-amber-400">npm install -g myapp</code>
<button type="button" aria-label="Copy"
class="ml-4 shrink-0 rounded p-1 text-[var(--ws-code-preview-text-muted)] transition hover:text-[var(--ws-code-preview-text)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/></svg>
</button>
</div>
<p class="mt-2.5 mb-1 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-code-preview-text-muted)]">Or with pnpm / yarn</p>
<div class="flex items-center gap-3 rounded-lg bg-slate-900/50 px-4 py-3">
<code class="font-mono text-sm text-amber-400">pnpm add -g myapp</code>
<span class="text-[var(--ws-code-preview-text-muted)]">/</span>
<code class="font-mono text-sm text-amber-400">yarn global add myapp</code>
</div>
</div>
</div>
<!-- Footer -->
<div class="flex items-center gap-2 border-t border-[var(--ws-code-preview-border)] px-5 py-3">
<svg class="h-3.5 w-3.5 text-[var(--ws-code-preview-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.091Z"/></svg>
<span class="text-xs text-[var(--ws-code-preview-text-muted)]">v2.4.0 · MIT License · <a href="#" class="hover:text-[var(--ws-code-preview-text)] underline underline-offset-2">Release notes</a></span>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
code-previewinstallterminalclidarktabscopydevelopernpmbrewpowershell
Slots
| Name | Required | Description |
|---|---|---|
| tabs | Yes | OS tab labels (macOS, Linux, Windows, npm). |
| panels | Yes | Per-OS content with command lines and copy buttons. |
| footer | No | Version badge and release notes link. |
Dark terminal card (ws-code-preview tokens, bg: #0f172a) with four CSS-only OS tabs via radio peer-checked. Each panel shows the platform-appropriate install command(s) with a copy icon button. macOS offers both Homebrew and curl; Linux shows a single shell script; Windows shows PowerShell irm | iex; npm shows all three package managers. Footer bar displays version + release notes link. Extend by adding a deb/rpm tab or a Docker panel as needed.