FLUXLAY

Display Terminal Output

Use useTerminal to create a read-only xterm terminal and render shell command output with full ANSI color support.

Basic Usage

import { useTerminal, useShell, TerminalThemes } from "@fluxlay/react";
 
function Terminal() {
  const { terminalRef, instance } = useTerminal({
    fontSize: 14,
    theme: TerminalThemes.dracula
  });
 
  useShell("my-command", { terminal: instance });
 
  return <div ref={terminalRef} style={{ height: 400, width: "100%" }} />;
}

Customization

Font

const { terminalRef, instance } = useTerminal({
  fontSize: 16,
  fontFamily: "'JetBrains Mono', monospace"
});

Theme

Choose from 20+ built-in themes:

// Dark themes
TerminalThemes.dark.default;
TerminalThemes.dark.modern;
TerminalThemes.nord;
TerminalThemes.dracula;
TerminalThemes.tokyoNight;
TerminalThemes.oneDark;
 
// Light themes
TerminalThemes.light.default;
TerminalThemes.solarized.light;
TerminalThemes.catppuccin.latte;

Layout

The terminal automatically fits its container using the FitAddon. Set the size via the parent element:

<div ref={terminalRef} className="h-full w-full" />

Notes

  • The terminal is read-only — no user input is accepted.
  • The cursor is hidden.
  • Scrollback is disabled.
  • The terminal fills its container via CSS overrides.

See the useTerminal Reference for full API details.