Message

User turns on a full-width bar and assistant turns behind a white bullet.

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 ClaudeCodeMessageExample() {
  return (
    <ClaudeCodeTerminal title="claude — messages">
      <ClaudeCodeMessage from="user">{turn.prompt}</ClaudeCodeMessage>
      <ClaudeCodeMessage>{turn.answer}</ClaudeCodeMessage>
    </ClaudeCodeTerminal>
  );
}

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

ClaudeCodeMessage lays out a turn on Claude Code’s two-column grid: a marker column two characters wide, then the text.

• from="user" puts the prompt on the gray bar behind a dim ❯.
• from="assistant", the default, starts the answer with a white ●.

Text keeps its line breaks, so \n\n gives a blank line between paragraphs. When children is a string, `code` renders in lavender and **bold** in white, like Claude Code’s markdown. Pass elements for anything richer. The rest of the props go to the root div.

Used in