Terminal

The terminal window the Claude Code parts sit in.

import { ClaudeCodeMessage } from "../components/claude-code-message";
import { ClaudeCodeTerminal } from "../components/claude-code-terminal";
import { CLAUDE_CODE_SESSION } from "../constants/claude-code-session";

const [turn] = CLAUDE_CODE_SESSION.turns;

export default function ClaudeCodeTerminalExample() {
  return (
    <ClaudeCodeTerminal title={CLAUDE_CODE_SESSION.title}>
      <ClaudeCodeMessage from="user">{turn.prompt}</ClaudeCodeMessage>
      <ClaudeCodeMessage>{turn.answer}</ClaudeCodeMessage>
    </ClaudeCodeTerminal>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-code-terminal

ClaudeCodeTerminal is the window the other Claude Code parts sit in. It paints Claude Code’s near-black background, a slim title bar with three traffic lights and a body that stacks its children one blank terminal line apart.

Prop	Default	Description
`title`		Text centered in the title bar, like `claude — ~/acme/web`.
`contentClassName`		Classes for the body, a flex column with `gap-5`.
`footer`		Pinned under the scrolling body. Put the `ClaudeCodePrompt` here so it stays visible.

It is a shadcn Card: the title bar is a CardHeader with a CardTitle and the body is a CardContent inside a ScrollArea. Give the terminal a height, like h-150, to scroll long sessions. The rest of the props go to the Card.

Used in

Claude Code

A Claude Code terminal session with the compact header, tool calls, a running turn and the prompt.