Terminal

A streaming terminal surface for ANSI build and agent logs — copy, clear, and an optional streaming caret.

Streaming

ANSI-colored build output streams in while isStreaming is true. Copy and clear sit in the header.

Loading…

Installation

CLI

npx @sonojs/ui@latest add terminal

Also needsnpx @sonojs/ui@latest add button spinner && npm i ansi-to-react lucide-react

Usage

terminal.tsx

import {
  Terminal,
  TerminalActions,
  TerminalClearButton,
  TerminalContent,
  TerminalCopyButton,
  TerminalHeader,
  TerminalStatus,
  TerminalTitle,
} from "@/components/sonojs/terminal"

export function Example() {
  return (
    <Terminal output="$ npm run build\n✓ Done" isStreaming={false}>
      <TerminalHeader>
        <TerminalTitle>Build Output</TerminalTitle>
        <div className="flex items-center gap-1">
          <TerminalStatus />
          <TerminalActions>
            <TerminalCopyButton />
            <TerminalClearButton />
          </TerminalActions>
        </div>
      </TerminalHeader>
      <TerminalContent />
    </Terminal>
  )
}

Props

Prop	Type	Default	Description
output	string	—	Full terminal text (ANSI escapes supported).
isStreaming	boolean	false	Shows status + caret while true.
autoScroll	boolean	true	Keep the viewport pinned to the latest line.
onClear	() => void	—	Enables the clear action in the header.
children	ReactNode	—	Compose `TerminalHeader` / `TerminalContent`, or omit for the default chrome.