Kanshō

Docs / Sandbox and code /

Terminal

Terminal output panel: monospace text, ANSI color support, and scroll-to-bottom.

Preview

bash — my-app
~/projects/my-app  main
bun install
bun install v1.1.21 (b6c9056c)
  + @prisma/client@5.16.1
  + jose@5.6.3
  + next@15.2.0
  + react@19.0.0
  + typescript@5.5.4
10:22:41268 packages installed [3.41s]
~/projects/my-app  main
bun run test
✓ src/lib/auth.test.ts (6 tests) 48ms
✓ src/lib/db.test.ts (3 tests) 12ms
10:22:43 Test Files  2 passed (2)
      Tests  9 passed (9)
   Duration  1.23s
~/projects/my-app  main $

Variants

Success output

bash — my-app
~/projects/my-app  main
bun install
bun install v1.1.21 (b6c9056c)
  + @prisma/client@5.16.1
  + jose@5.6.3
  + next@15.2.0
  + react@19.0.0
  + typescript@5.5.4
10:22:41268 packages installed [3.41s]
~/projects/my-app  main
bun run test
✓ src/lib/auth.test.ts (6 tests) 48ms
✓ src/lib/db.test.ts (3 tests) 12ms
10:22:43 Test Files  2 passed (2)
      Tests  9 passed (9)
   Duration  1.23s
~/projects/my-app  main $

Error output

bash — my-app
~/projects/my-app  feat/auth
bun run build
   Creating an optimized production build ...
./src/lib/auth.ts
Type error: Property 'sub' does not exist on type 'JWTPayload'
  16 |   const { payload } = await jwtVerify(token, SECRET)
> 17 |   if (!payload.sub) throw new AuthError('Invalid token')
     |           ^
  18 |   return payload
10:25:07✖ Build failed in 2.14s

Props

PropTypeDescription
lines*TerminalLine[]Output lines. Each carries a kind (stdout, stderr, system, prompt, input) and text.
titlestringLabel shown in the header bar. Defaults to 'Terminal'.
promptstringWhen set, renders an active blinking cursor prompt at the bottom with this cwd.
promptValuestringDecorative text after the prompt cursor.
maxHeightstringMax height of the output area before scrolling. Defaults to '320px'.
classNamestringAdditional class names for the root element.

* required.

Usage

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

<Terminal
  title="bash — my-app"
  lines={[
    { kind: "prompt", text: "~/my-app  main" },
    { kind: "input",  text: "bun run test" },
    { kind: "stdout", text: "✓ 9 tests passed (1.23s)", timestamp: "10:22:43" },
  ]}
  prompt="~/my-app  main"
/>