Introduction

A configurable, extensible terminal component for React.

What is @trents/terminal?

@trents/terminal is a React component that renders a fully-featured terminal UI. It supports custom commands, a virtual filesystem, plugins, theming, pipe chains, CRT effects, and four display modes — all out of the box.

Use it as a dropdown overlay, an inline embed, a floating window, or a full-screen terminal. It's designed to be extended with your own commands, middleware, and panel plugins.

Features

  • - 25+ built-in commands (filesystem, history, pipes, theming)
  • - Pipe chains: ls | grep docs | head -n 5
  • - 4 display modes — dropdown, inline, floating, fullscreen
  • - Plugin system with middleware, panels, and status bar items
  • - Virtual filesystem with JSON trees or OPFS adapter
  • - Theme integration — dark/light modes, full color map override
  • - CRT scanline/glow/vignette effects
  • - Procedural typing sounds
  • - Tab completion, history search (Ctrl+R), command palette (Ctrl+K)
  • - Async generator streaming for progressive output
  • - Screenshots (Ctrl+Shift+S)
  • - Boot sequence animations
  • - Bottom bar with configurable hotkeys
  • - State persistence via localStorage
  • - Full TypeScript support

Live Demo

Try it out — type help to see available commands.

terminal — type 'help' for commands
Type 'help' for available commands.
~$

Quick Start

App.tsx
import { Terminal } from "@trents/terminal"
import "@trents/terminal/styles.css"

export default function App() {
  return <Terminal variant="inline" />
}
0