code terminal preview code-block monospace cli code terminal preview code-block cli console bash monospace terminal style code block dark code display with toolbar dots
Code Preview Base
Fetch pattern JSON:
curl https://webspire.de/patterns/code-preview/base.json base.html
<div class="ws-code-preview overflow-hidden rounded-lg border border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-bg)] shadow-lg">
<!-- Toolbar -->
<div class="flex items-center gap-2 border-b border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-header-bg)] px-4 py-3">
<span class="h-3 w-3 rounded-full bg-red-500" aria-hidden="true"></span>
<span class="h-3 w-3 rounded-full bg-yellow-500" aria-hidden="true"></span>
<span class="h-3 w-3 rounded-full bg-green-500" aria-hidden="true"></span>
<span class="ml-3 text-sm font-medium text-[var(--ws-code-preview-text)]">Terminal</span>
</div>
<!-- Code body -->
<pre class="overflow-x-auto p-4 font-mono text-sm leading-relaxed text-[var(--ws-code-preview-text)]"><code><span class="text-green-400">$</span> npm create astro@latest my-project
<span class="text-green-400">$</span> cd my-project
<span class="text-green-400">$</span> npm install
<span class="text-green-400">$</span> npm run dev</code></pre>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
codeterminalpreviewcode-blockmonospacecli
Slots
| Name | Required | Description |
|---|---|---|
| title | No | Title text shown in the toolbar area. |
| code | Yes | Code or command content displayed in the block. |
Dark terminal-style code display with macOS traffic light dots, toolbar title, and monospace formatting. Use as a baseline for displaying CLI commands, code snippets, or installation instructions.