CC
Claude Code
v2.1.88
Claude CodeComponents Module

Components Module

346 files · ~40K lines

React for the Terminal — Ink components powering the REPL. The largest module by file count (346 files). Uses the same React patterns as web apps, but renders to ANSI escape codes via the yoga-layout flexbox engine.

screens/REPL.tsxcomponents/ink/
⚡

Ink = React Native for the Terminal

The exact same Yoga flexbox engine used in React Native runs inside Claude Code's terminal. useState, useEffect, flex, gap, padding — all work identically. Output is ANSI escape codes instead of pixels.

Web / React Native / Ink — The Same Abstraction

The same flexbox engine runs in all three contexts. Only the output target differs.

ink/
🌐
Web (DOM)
Primitivesdiv, span
LayoutCSS flexbox (browser)
HooksuseState, useEffect
OutputPixels on screen
<div style={{display:'flex'}}>
📱
React Native
PrimitivesView, Text
LayoutYoga engine
HooksuseState, useEffect
OutputNative UI widgets
<View style={{flexDirection:'row'}}>
💻
Ink (Claude Code)
PrimitivesBox, Text
LayoutSame Yoga engine
HooksuseState, useEffect
OutputANSI → terminal
<Box flexDirection="row">
The green row — Yoga engine — is identical in React Native and Ink. Anthropic forked the Ink library and ships it inside Claude Code.

The Rendering Stack — JSX to Terminal in 5 Layers

How your React component becomes terminal text — the 5-layer transformation.

1
Your JSXBox, Text, flexbox props — you write this
✍️
2
Ink rendererReact reconciler + useState/useEffect
⚛️
3
Yoga layout engineFlexbox calculations (same as React Native)
📐
4
ANSI escape codes\x1b[32m, cursor movements, terminal rows/cols
💻
5
stdoutYour terminal window renders this
🖥️

REPL.tsx — 5005 Lines, 6 Responsibilities

What a single file manages for the entire Claude Code interactive session.

screens/REPL.tsx
1
Input handling

Multi-line input, history navigation, paste detection, slash command autocomplete

2
Streaming display

Subscribes to QueryEngine async generator — each token triggers a re-render showing partial output

3
Tool result rendering

Each tool type has its own renderer: BashTool shows colored output, FileEdit shows diffs, WebFetch shows extracted content

4
Permission dialogs

Renders terminal dialogs for tool approval — Allow once / Always allow / Never — inline in the REPL

5
Status indicators

Spinning indicators during API calls, compaction notices, MCP connection status, token usage bar

6
Session state

Maintains UI state: scroll position, collapsed/expanded tool results, model name display

Component Tree

The hierarchy of major components inside REPL.tsx.

main.tsxentry
screens/REPL.tsx5K lines
components/Input
components/Messages
components/ToolResult
components/PermissionDialog
components/StatusBar

CLI entry — initializes Ink, renders REPL into terminal stdout

5005-line main screen, owns all REPL state

Multi-line text input with history

Scrollable message list

Per-tool result renderers

Allow/deny terminal dialog

Token usage, model, MCP status

Key Files

screens/REPL.tsx5005 lines

Main REPL screen — orchestrates all terminal UI state

components/150+ files

Ink terminal components: prompts, tool results, messages, spinners

main.tsx4683 lines

CLI initialization, renders REPL into terminal via Ink

ink/~80KB

Custom Ink fork — yoga-layout flexbox engine for terminal rendering

cli/print.ts5594 lines

Formatted terminal output, ANSI styling, diff rendering

hooks/~30KB

Permission hooks, tool approval UI hooks, state bindings

Related Pages
Utils Module

utils/hooks.ts (5022 lines) provides the React hooks that Components binds to — state, streaming, input.

Query/Engine Module

REPL subscribes to the QueryEngine async generator stream for live streaming token display.

Services Module

Components use services/analytics to track user interactions like command usage.