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
jsx
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