Skip to content

← All components

Display and feedback

TerminalCodeBlock

Terminal transcript with copyable commands and ANSI-styled output.

Live example

Terminal
npm install @cofob/design-system-css
added 1 package in 842ms
npm run build -- --mode production
✓ 51 pages built
Report: design.cofob.dev

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { TerminalCodeBlock } from "@cofob/design-system-react";

/**
 * Complete TerminalCodeBlock parameter reference.
 * @param entries
 *   type: readonly { command: string; output?: string }[]
 *   required
 *   example: {entries}
 * @param label
 *   type: string | renderable content
 *   default: —
 *   example: "Accessible label"
 * @param prompt
 *   type: string
 *   default: "$"
 *   example: "$"
 * @param copyable
 *   type: boolean
 *   default: true
 *   example: true
 * @param copyLabel
 *   type: string
 *   default: "Copy command"
 *   example: "Accessible label"
 * @param copiedLabel
 *   type: string
 *   default: "Copied"
 *   example: "Accessible label"
 * @param copyErrorLabel
 *   type: string
 *   default: "Try again"
 *   example: "Accessible label"
 * @param copyResetAfter
 *   type: number (milliseconds)
 *   default: 1800
 *   example: 1800
 * @param outputLabel
 *   type: string
 *   default: "Command output"
 *   example: "Accessible label"
 * @param div attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function TerminalCodeBlockExample() {
  return (
    <TerminalCodeBlock entries={[{ command: "npm run build", output: "\u001b[1;32mBuild complete\u001b[0m" }]} />
  );
}

Svelte

svelte
<script lang="ts">
  import { TerminalCodeBlock } from "@cofob/design-system-svelte";

  // Complete TerminalCodeBlock parameter reference.
  // entries
  //   type: readonly { command: string; output?: string }[]
  //   required
  //   example: {entries}
  // label
  //   type: string | renderable content
  //   default: —
  //   example: "Accessible label"
  // prompt
  //   type: string
  //   default: "$"
  //   example: "$"
  // copyable
  //   type: boolean
  //   default: true
  //   example: true
  // copyLabel
  //   type: string
  //   default: "Copy command"
  //   example: "Accessible label"
  // copiedLabel
  //   type: string
  //   default: "Copied"
  //   example: "Accessible label"
  // copyErrorLabel
  //   type: string
  //   default: "Try again"
  //   example: "Accessible label"
  // copyResetAfter
  //   type: number (milliseconds)
  //   default: 1800
  //   example: 1800
  // outputLabel
  //   type: string
  //   default: "Command output"
  //   example: "Accessible label"
  // div attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<TerminalCodeBlock entries={[{ command: "npm run build", output: "\u001b[1;32mBuild complete\u001b[0m" }]} />

HTML

html
<!--
  Complete TerminalCodeBlock parameter reference.
  entries
    type: readonly { command: string; output?: string }[]
    required
    example: {entries}
  label
    type: string | renderable content
    default: —
    example: "Accessible label"
  prompt
    type: string
    default: "$"
    example: "$"
  copyable
    type: boolean
    default: true
    example: true
  copyLabel
    type: string
    default: "Copy command"
    example: "Accessible label"
  copiedLabel
    type: string
    default: "Copied"
    example: "Accessible label"
  copyErrorLabel
    type: string
    default: "Try again"
    example: "Accessible label"
  copyResetAfter
    type: number (milliseconds)
    default: 1800
    example: 1800
  outputLabel
    type: string
    default: "Command output"
    example: "Accessible label"
  div attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<div class="cf-terminal-code-block"><div data-cf-copy-scope><code data-cf-copy-source>npm run build</code><button data-cf-copy-button>Copy command</button><pre><code><span class="cf-terminal-output__token" data-bold="true" style="--cf-terminal-token-foreground:var(--cf-terminal-foreground-2)">Build complete</span></code></pre></div></div>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
entriesrequiredreadonly { command: string; output?: string }[]requiredReact · Svelte · HTML{entries}Ordered terminal commands with optional automatically parsed ANSI output kept separate from copyable commands.
labelstring | renderable content—React · Svelte · HTML"Accessible label"Visible or accessible name, depending on the component.
promptstring"$"React · Svelte · HTML"$"Primary instruction content; terminal prompts are visual and excluded from copied command text.
copyablebooleantrueReact · Svelte · HTMLtrueEnables the clipboard action.
copyLabelstring"Copy command"React · Svelte · HTML"Accessible label"Initial accessible copy button text.
copiedLabelstring"Copied"React · Svelte · HTML"Accessible label"Temporary success label after copying.
copyErrorLabelstring"Try again"React · Svelte · HTML"Accessible label"Error label when clipboard access fails.
copyResetAfternumber (milliseconds)1800React · Svelte · HTML1800Delay before the copy action returns to its initial label.
outputLabelstring"Command output"React · Svelte · HTML"Accessible label"Accessible name for command output regions.
div attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.