Terminal Block
The code-block sibling for command output: the command and its live status in the header, the output carved into a well below. A thread and review element — output arrives as props, not from a live PTY.
bun run test --filter billingDone$ bun run test --filter billing ✓ webhooks/stripe.test.ts (12 tests) 84ms ✓ webhooks/backfill.test.ts (7 tests) 41ms Test Files 2 passed (2) Tests 19 passed (19)
tsx
import { TerminalBlock } from "@/registry/seam/ui/terminal-block"
const OUTPUT = `$ bun run test --filter billing
✓ webhooks/stripe.test.ts (12 tests) 84ms
✓ webhooks/backfill.test.ts (7 tests) 41ms
Test Files 2 passed (2)
Tests 19 passed (19)`
export default function TerminalBlockDemo() {
return (
<TerminalBlock
command="bun run test --filter billing"
status="done"
className="w-full max-w-md"
>
{OUTPUT}
</TerminalBlock>
)
}bunx --bun @seamui/cli@latest add terminal-blockNotes
- Status is the shared
agent-statusvocabulary —workingshows a pulsing cursor at the output tail (CSSanimate-pulse, opacity-only, identical under reduced motion);waitingmeans the process needs input. - The copy key copies
copyText(defaulting to string children) with the standard icon crossfade; the output region is keyboard-scrollable like code-block. - ANSI handling is deliberately out of scope — pre-process escape codes upstream and pass plain text or your own nodes.
Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.