Skip to content

Terminal

Command output with its ANSI colors mapped to tokens, so each passes 4.5:1 light and dark. The output is a polite log; copy leaves out the escape codes.

Sourcecomponents/terminal.tsx
pnpm test
$ pnpm test

 PASS  tests/cart.spec.ts (312 ms)
 FAIL  tests/checkout.spec.ts
  ✕ rejects an expired card
  ✓ applies a coupon
  ○ skipped: pays with a gift card

Colors: black red green yellow blue magenta cyan white
Bright: black red green yellow blue magenta cyan white

Usage

Terminal usage
import { useState } from "react";import { Terminal } from "@/components/terminal";
export function TerminalUsage({ output, running }: { output: string; running: boolean }) {  const [shown, setShown] = useState(output);  return <Terminal output={shown} isStreaming={running} onClear={() => setShown("")} />;}

When to use

Use when

Command output from a run, ANSI colors included (mapped to tokens, never inline). A polite log that follows new output; copy leaves out escape codes. Requires anser

Don’t use when

Code the user reads or copies as source (use Code Block)