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

A rebuild of the Claude Code terminal UI, composed from the [Claude Code components](/components/claude-code/terminal). It's a working chat: type a prompt and press Enter, and Claude spins with the orange status line, runs its tool calls one by one, streams the answer and closes the turn with a `✻ Crafted for 6s` line. Press Escape while it works to interrupt it. The first turn folds its shell call into `Ran 1 shell command` (click it to see the call), and Shift+Tab in the prompt cycles the permission mode.

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

## Installation

<RegistryInstall name="claude-code" />

This adds every Claude Code component to `components/claude-code`, a demo session and the `useClaudeCodeChat` hook that plays it back.

## Chat

`useClaudeCodeChat(history, replies)` holds the conversation. It starts with the finished `history` turns and answers each prompt with the next scripted reply from `CLAUDE_CODE_REPLIES`. Wire it to the prompt with `busy`, `onSend` and `onStop`, and swap the hook for your own agent's stream to run a real session.

```tsx
const chat = useClaudeCodeChat(CLAUDE_CODE_SESSION.turns, CLAUDE_CODE_REPLIES);

<ClaudeCodePrompt busy={chat.busy} onSend={chat.send} onStop={chat.stop} />
```

The components use your system's monospace stack. Point `--font-claude-code` at your own mono font, like Geist Mono, to change it.

## ClaudeCodeTerminal

The root is a shadcn `Card` with a title bar and a stacked body. Put the other parts inside in the order Claude Code prints them: `ClaudeCodeHeader`, then per turn a user `ClaudeCodeMessage`, tool calls, the answer and a `ClaudeCodeTurnSummary`, and `ClaudeCodePrompt` last.

| Prop | Default | Description |
| --- | --- | --- |
| `title` | | Text in the title bar. |
| `contentClassName` | | Classes for the body. |

## Theming

The block is built on the shadcn Base UI style. It uses shadcn `Button`, `Card`, `Collapsible`, `InputGroup`, `Kbd` and `ScrollArea`, and the CLI installs any you're missing.

Its colors are `--claude-code-*` tokens that the CLI adds to your CSS, mapped to utilities like `bg-claude-code-bg` and `text-claude-code-accent`. They ship with light and dark values based on Claude Code's light and dark themes, so the terminal follows your app's theme. Change the tokens in your CSS to retheme it:

```css
:root {
  --claude-code-bg: #0d1117;
  --claude-code-accent: var(--primary);
}
```

## Trademarks

Claude and Claude Code are trademarks of Anthropic PBC. Notra is not affiliated with or endorsed by Anthropic. See [Trademarks](/trademarks).