Shared from "Claude-Code" on Inkdown
Claude Code's UI is built with Ink - a React renderer for terminals. It provides a component-based architecture similar to web React, but outputting to the terminal instead of the DOM.
| Directory/File | Purpose |
|---|---|
ink/ | Ink framework internals |
components/App.tsx | Root application component |
components/REPL.tsx | Main REPL interface |
components/PromptInput.tsx | User input area |
components/Messages/ | Message display components |
context/ | React contexts (notifications, modals) |
hooks/ | React hooks for UI logic |
Claude Code uses a customized Ink in src/ink/:
Root component that sets up providers:
The main REPL (Read-Eval-Print Loop) interface:
The core text input component:
Complete input with suggestions, history, etc.:
Manages fullscreen dialogs and overlays:
Common dialog pattern:
Ink uses Yoga (Facebook's flexbox engine) for layout. Think CSS but for character cells.
Just like React web - components are functions returning JSX.
useState, useEffect, useContext - all work like web React.
useInput hook provides keyboard events. Not DOM events - raw stdin.
No document, window, localStorage. Use Node.js APIs instead.
Colors, cursor movement, clearing - all manual ANSI sequences.