ink

name: ink description: Build CLI applications using React. Use when creating terminal UIs, handling keyboard input, or building interactive command-line tools with React components. Supports flexbox layouts, text styling, focus management, and accessibility.

Ink - React for CLIs

React for CLIs. Build and test your CLI output using components.

Ink provides the same component-based UI building experience that React offers in the browser, but for command-line apps. It uses Yoga for Flexbox layouts in the terminal.

Important: All text must be wrapped in a <Text> component.

Quick Example

import {render, Text, Box} from 'ink';

render(
    <Box borderStyle="round" padding={1}>
        <Text color="green">Hello World</Text>
    </Box>
);

Components

• <Text> - Display text with styling (color, bold, italic, underline, etc.)
• <Box> - Flexbox container for layouts
  • Layout Properties - dimensions, flex, spacing, alignment
  • Visual Properties - borders, colors, backgrounds
• <Newline> - Insert newline characters
• <Spacer> - Flexible space that expands to fill available space
• <Static> - Permanently render output above everything else (for logs, completed tasks)
• <Transform> - Transform string representation before output

Hooks

Interaction

• useInput() - Handle keyboard input (arrow keys, enter, escape, etc.)
• useFocus() - Make components focusable with Tab key
• useFocusManager() - Programmatically manage focus

Lifecycle & Streams

• useApp() - Exit the app programmatically
• useStdin() - Access stdin stream and setRawMode
• useStdout() - Access stdout stream and write output
• useStderr() - Access stderr stream

Accessibility

• useIsScreenReaderEnabled() - Detect if screen reader is active

API

• render(tree, options?) - Mount and render your app
• Instance Methods - rerender(), unmount(), waitUntilExit(), clear()
• measureElement(ref) - Get width and height of a component

Guides

• Accessibility & Screen Readers - ARIA support, screen reader integration
• Testing - Test Ink components with ink-testing-library
• React DevTools - Debug with React DevTools

Third-Party Components

See references/third-party.md for a comprehensive list of community components including:

• Text inputs, spinners, select menus
• Progress bars, tables, charts
• Markdown rendering, syntax highlighting
• And many more