Mischief

41 / Code

Terminal Output

Streaming command output with stderr called out, an exit code, and scroll that follows without trapping you.

Live previewSource
pnpm install mischief-ui
Running

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/terminal-output
import { TerminalOutput } from "mischief-ui/terminal-output"

Usage

export function Install() {
  return (
    <TerminalOutput
      command="pnpm install"
      output={lines}
      running={pending}
      exitCode={code}
    />
  )
}

API

outputstring | (TerminalLine | string)[]A plain string is split on newlines as stdout.
commandstringThe command that produced the output, shown above it.
cwdstringWorking directory, shown beside the command on wider screens.
runningbooleanShows the running indicator and marks the log busy.
exitCodenumberShown once settled. Anything other than zero reads as a failure.
maxHeightnumber | stringHeight before the log scrolls. Defaults to "18rem".
followbooleanKeeps the newest line in view. Defaults to true.

Accessibility

Output is a log region marked busy while the command runs, so assistive technology reads new lines without the page stealing focus. stderr is distinguished by a data attribute as well as colour. Following is abandoned the moment the reader scrolls up and resumes when they return to the bottom, so reading back is never interrupted. ANSI escape sequences are stripped rather than rendered.

Dependencies

  • lucide-react