Terminal Block

Stable

Authentic cybernetic shell console primitives featuring Mac-style indicator buttons, interactive blinking carets, copy-to-clipboard actions, and phosphor scanlines.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Terminal, 
  TerminalHeader, 
  TerminalPrompt, 
  TerminalCommand, 
  TerminalOutput, 
  TerminalBlock 
} from '@siberui/react';

Basic Usage & One-Line Convenience Block

Use TerminalBlock for immediate drop-in code snippet rendering with built-in clipboard copying.

deploy_gateway.sh

#!/bin/bash
echo "Initializing quantum mesh link..."
ssh -i ~/.ssh/orbital_rsa operator@fra-gateway.siber.net
echo "Quorum authenticated. 32 nodes synchronized."

tsx

<div className="max-w-lg w-full">
  <TerminalBlock
    title="deploy_gateway.sh"
    code={`#!/bin/bash
echo "Initializing quantum mesh link..."
ssh -i ~/.ssh/orbital_rsa operator@fra-gateway.siber.net
echo "Quorum authenticated. 32 nodes synchronized."`}
  />
</div>

Composable Terminal Architecture

Compose rich multi-tier interactive session logs by combining Terminal, TerminalHeader, TerminalCommand, and TerminalOutput.

operator@siber-orbital: ~

$siber-cli cluster status

14:02:48 UTC

> Cluster FRA-04: ONLINE (32/32 nodes verified)

> Average cluster latency: 0.32 ms

$siber-cli keygen --curve kyber-1024

14:03:01 UTC

> Public key generated: 0x7F9A...4B21

tsx

<Terminal className="max-w-lg w-full">
  <TerminalHeader title="operator@siber-orbital: ~" state="online" />
  <TerminalOutput>
    <TerminalCommand command="siber-cli cluster status" timestamp="14:02:48 UTC" />
    <p className="text-xs text-emerald-400">&gt; Cluster FRA-04: ONLINE (32/32 nodes verified)</p>
    <p className="text-xs text-slate-400">&gt; Average cluster latency: 0.32 ms</p>
    <TerminalCommand command="siber-cli keygen --curve kyber-1024" timestamp="14:03:01 UTC" />
    <p className="text-xs text-cyan-400">&gt; Public key generated: 0x7F9A...4B21</p>
  </TerminalOutput>
</Terminal>

Interactive Command Prompt & Blinking Caret

Render live shell input prompts with TerminalPrompt and animated cursor carets (showCaret).

root@airgap-hsm: /sec

$sudo vault unlock --sig 0x48FA_KEY

tsx

<Terminal className="max-w-lg w-full">
  <TerminalHeader title="root@airgap-hsm: /sec" state="critical" />
  <TerminalOutput>
    <TerminalPrompt showCaret>
      sudo vault unlock --sig 0x48FA_KEY
    </TerminalPrompt>
  </TerminalOutput>
</Terminal>

Phosphor Scanline Overlay Mode

Pass scanline={true} to overlay a CRT phosphor raster texture across the entire terminal viewport.

TELEMETRY SCANLINE FEED

> STREAMING RAW SATELLITE TELEMETRY...

> PACKET COUNT: 148,920 FRAMES

> CHECKSUM CRC32: VALID

tsx

<Terminal scanline className="max-w-lg w-full">
  <TerminalHeader title="TELEMETRY SCANLINE FEED" state="loading" />
  <TerminalOutput>
    <p className="text-xs text-cyan-300">&gt; STREAMING RAW SATELLITE TELEMETRY...</p>
    <p className="text-xs text-slate-400">&gt; PACKET COUNT: 148,920 FRAMES</p>
    <p className="text-xs text-emerald-400">&gt; CHECKSUM CRC32: VALID</p>
  </TerminalOutput>
</Terminal>

Frosted Cyber-Glass Terminal Enclave

Nest terminal consoles inside acrylic glass modules layered over circuit textures and border sweeps.

SECURE SHELL GATEWAY

256-BIT TLS

auth@satellite-edge

$curl -sSL https://siberui.com/install.sh | bash

tsx

<div className="relative w-full max-w-lg p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-4">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <TerminalIcon className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">SECURE SHELL GATEWAY</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">256-BIT TLS</Badge>
    </div>

    <Terminal className="bg-black/60 border-white/[0.08]">
      <TerminalHeader title="auth@satellite-edge" state="online" />
      <TerminalOutput copyText="curl -sSL https://siberui.com/install.sh | bash">
        <TerminalPrompt showCaret>
          curl -sSL https://siberui.com/install.sh | bash
        </TerminalPrompt>
      </TerminalOutput>
    </Terminal>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Telemetry Shell Card

Composite mission defense card with interactive command execution.

ORBITAL DISPATCH CONSOLE

ONLINE

Direct command bus connection to aerospace sentinels.

root@sentinel-alpha

$sentinel execute --target VECTOR_04

tsx

<Card className="max-w-lg mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">ORBITAL DISPATCH CONSOLE</CardTitle>
      <Badge variant="neon" size="sm">ONLINE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Direct command bus connection to aerospace sentinels.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <Terminal className="bg-[#040711] border-cyan-500/20">
      <TerminalHeader title="root@sentinel-alpha" state="online" />
      <TerminalOutput copyText="sentinel execute --target VECTOR_04">
        <TerminalPrompt showCaret>
          sentinel execute --target VECTOR_04
        </TerminalPrompt>
      </TerminalOutput>
    </Terminal>

    <div className="flex justify-end gap-3">
      <Button variant="secondary" size="sm">CLEAR BUFFER</Button>
      <Button variant="neon" size="sm" glow>EXECUTE COMMAND</Button>
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (6)← swipe to inspect →

Property	Description	Type	Default
code	For TerminalBlock: Raw source code string.	string	-
title	Filename or window title in the terminal chrome header.	React.ReactNode	-
scanline	For Terminal: Overlays a phosphor scanline texture.	boolean	false
state	For TerminalHeader: StatusDot semantic state ("online", "loading", etc.).	StatusState	-
copyText	For TerminalOutput: Enables the copy-to-clipboard icon button.	string	-
showCaret	For TerminalPrompt: Displays the animated blinking cursor.	boolean	false

Accessibility

Accessible Copy: The copy button in TerminalOutput has an explicit aria-label="Copy output" and provides immediate visual checkmark confirmation.

Best Practices

Copyable Commands: Always provide copyText on terminal output blocks containing copyable installation or CLI commands.