@omegaengine/terminal

Drop-in terminal UI component for React — boot sequences, typed output, command systems, themes, and visual effects.

Install

npm install @omegaengine/terminal

Quick Start

import { Terminal } from '@omegaengine/terminal'

function App() {
  return (
    <Terminal
      theme="dark"
      title="my-app"
      bootSequence={[
        { text: 'Initializing...', delay: 0 },
        { text: '✓ System ready.', delay: 800 },
      ]}
      commands={{
        hello: () => 'Hello, world!',
        greet: {
          description: 'Greet someone',
          handler: (args) => `Hello, ${args[0] || 'stranger'}!`,
        },
      }}
    />
  )
}

Features

Free (MIT)

• useTerminal() hook for programmatic control
• <Terminal /> component with full keyboard navigation
• Boot sequence engine with timed output
• Command system with history and tab-completion
• Ghost text suggestions
• 2 built-in themes (Dark, Hacker)
• createTheme() for custom themes
• 5 free effects (CursorGlow, MatrixRain, Glitch, ScanLines, BSOD)
• Syntax highlighting
• Full TypeScript support
• prefers-reduced-motion support
• Accessible (WAI-ARIA compliant)

Pro — $29/mo

• 8 premium themes (Neon, Cyberpunk, Dracula, Nord, Monokai, Solarized, Retro CRT, Midnight)
• 5 advanced effects (Holographic, Chromatic, VHS, Rain, Particles)
• 4 pre-built auth flows (OAuth, Magic Link, 2FA, SSO)
• 12 boot sequence library
• Multi-language (i18n) support
• Accessibility Pro mode
• Email support

Enterprise — $199/seat/mo

• Everything in Pro
• Analytics dashboard
• Enterprise SSO auth flow
• Custom branding removal
• Priority Slack support + SLA
• Unlimited projects
• Dedicated account manager

→ View pricing

useTerminal Hook

import { Terminal, useTerminal } from '@omegaengine/terminal'

function App() {
  const { ref, writeLine, type, clear, boot } = useTerminal()

  return (
    <>
      <Terminal ref={ref} theme="hacker" />
      <button onClick={() => writeLine('Hello!')}>Write</button>
      <button onClick={() => type('Typing...')}>Type</button>
      <button onClick={() => clear()}>Clear</button>
    </>
  )
}

Custom Themes

import { Terminal, createTheme } from '@omegaengine/terminal'

const myTheme = createTheme({
  bg: '#1a1a2e',
  fg: '#e6e6fa',
  accent: '#ff6b6b',
  name: 'My Theme',
})

<Terminal theme={myTheme} />

Commands

<Terminal
  commands={{
    deploy: {
      description: 'Deploy to production',
      handler: async (args) => {
        // async handlers supported
        await deploy(args[0])
        return '✓ Deployed successfully'
      },
    },
    clear: () => {}, // built-in clear also works
  }}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | theme | TerminalTheme \| string | "dark" | Theme object or built-in name | | bootSequence | BootSequenceLine[] | — | Animated startup lines | | commands | Record<string, ...> | {} | Command registry | | title | string | — | Title bar text | | prompt | string | "$ " | Input prompt prefix | | readOnly | boolean | false | Disable input | | height | string \| number | "auto" | Terminal height | | maxLines | number | 500 | Max scroll buffer | | ghostText | boolean | false | Tab completion ghost | | completions | string[] | [] | Tab completion options | | reduceMotion | boolean | false | Disable animations | | showTrafficLights | boolean | true | macOS-style buttons |

License

MIT — free for personal and commercial use.

Pro features require a license key.