Component reference

TerminalBlock

A command and its output, with the exit status.

Preview

TerminalBlock has no story of its own; this one draws it as part of a composed scene.

Running, failure, and unknown status

packages/meowtail/stories/output-blocks.stories.tsxline 67tsx

render: () => (
  <Stack>
    <TerminalBlock
      command={"bun test\n  --filter renderer\n"}
      cwd="/workspace/meowland"
      running
    />
    <TerminalBlock
      command="bun test"
      cwd="/workspace/meowland"
      exitCode={1}
      output="FAIL renderer"
    />
    <TerminalBlock command="sleep 30" signal="SIGTERM" output="" />
    <TerminalBlock command="echo result" output={"result\n"} />
    <TerminalBlock command="echo 'completed'" exitCode={0} output={"completed\n"} />
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { TerminalBlock } from "meowtail";

<TerminalBlock
  command={"bun test\n  --filter renderer\n"}
  cwd="/workspace/meowland"
  running
/>

Examples

Terminal, file, diff, and search

packages/meowtail/stories/output-blocks.stories.tsxline 14tsx

render: () => (
  <Stack>
    <TerminalBlock
      command="bun test"
      cwd="meowland"
      exitCode={0}
      output={
        "\u001b[32mPASS\u001b[0m renderer\n" +
        Array.from({ length: 24 }, (_, i) => `case ${i + 1}: passed`).join("\n")
      }
    />
    <ReadBlock
      label="src/main.ts"
      totalLines={120}
      lines={Array.from({ length: 24 }, (_, i) => ({
        number: i + 41,
        text: `const item${i} = ${i};`,
        highlighted: i === 2,
      }))}
    />
    <DiffBlock
      files={[
        {
          path: "theme.ts",
          lines: [
            { kind: "context", text: "export const theme = {" },
            { kind: "removed", text: "  radius: 8," },
            { kind: "added", text: "  radius: 16," },
            { kind: "context", text: "};" },
          ],
        },
      ]}
    />
    <SearchBlock
      kind="matches"
      total={20}
      truncated
      files={[
        { path: "src/theme.ts", matches: [{ lineNumber: 12, line: "export const theme = {};" }] },
        {
          path: "src/main.ts",
          matches: [{ lineNumber: 4, line: "import { theme } from './theme';" }],
        },
      ]}
    />
  </Stack>
)

API reference

Props

Prop	Type	Default
`command`Required	`string`	–
`cwd`	`string`	–
`output`	`string`	`""`
`running`	`boolean`	`false`
`exitCode`	`number \| null`	–
`signal`	`string`	–
`maxLines`	`number`	–
`copyText`	`string`	–
`onCopy`	`(text: string) => Promise<void>`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

rootpromptpromptLinecwdrunStaterunStateLabelcommandstatusspan

Registry

The component is registered as terminal-block in the meowtail component registry.