Terminal Window

Installation

npx shadcn@latest add @blank/terminal-window

Usage

import {
  TerminalWindow,
  TerminalWindowHeader,
  TerminalWindowBody,
  TerminalLine,
  TerminalTyping,
} from "@/components/ui/terminal-window"

<TerminalWindow>
  <TerminalWindowHeader>~/acme — zsh</TerminalWindowHeader>
  <TerminalWindowBody>
    <TerminalLine>
      <TerminalTyping>npx shadcn@latest add @blank/button</TerminalTyping>
    </TerminalLine>
    <TerminalLine variant="success">✔ Done.</TerminalLine>
  </TerminalWindowBody>
</TerminalWindow>

TerminalTyping starts when it scrolls into view and calls onComplete when the last character lands, which is the hook for revealing the output that follows. The full command is laid out invisibly beneath the typed text, so the line never reflows, and screen readers get the whole command at once. With reduced motion it renders complete and calls onComplete straight away.

Examples

Output

variant colours a line and drops the prompt: output, success, warning and error. prompt replaces the $ on command lines.