Terminal

Nothing says "developer tool" like a terminal that types itself. Terminal plays a scripted sequence — commands type out character by character with a blinking caret, output lands after a beat — inside a clean window frame. It starts when it scrolls into view, can loop, and collapses to plain text for screen readers and reduced-motion users.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/terminal.json"

Usage

import { Terminal } from "@/components/godui/terminal";

Drive it with a lines array. Mark commands with type: "command" so they type out; output and comment lines appear after an optional delay:

<Terminal
  title="bash"
  lines={[
    { text: "# deploy to production", type: "comment" },
    { text: "git push origin main", type: "command" },
    { text: "Everything up-to-date", type: "output", delay: 400 },
  ]}
/>

Tune the pacing, loop it, or strip the window chrome:

<Terminal lines={lines} typingSpeed={20} loop />
<Terminal lines={lines} showChrome={false} promptSymbol="›" />
<Terminal lines={lines} startOnView={false} />

Under prefers-reduced-motion, every line renders at once with no typing or caret blink, and the full transcript is always exposed to assistive tech.

Props

TerminalLine.type is "command" \| "output" \| "comment" (default "output"). All other div props are forwarded to the root element.