---
title: Message
description: User turns on a full-width bar and assistant turns behind a white bullet.
---

<Component path="claude-code/examples/claude-code-message" />

<RegistryInstall name="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

**[Claude Code](/blocks/claude-code)**

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