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 keyuseFocusManager() - Programmatically manage focus
Lifecycle & Streams
useApp() - Exit the app programmaticallyuseStdin() - Access stdin stream and setRawModeuseStdout() - Access stdout stream and write outputuseStderr() - 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
1---2name: ink3description: 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.4---5
6# Ink - React for CLIs
7
8> React for CLIs. Build and test your CLI output using components.
9
10Ink provides the same component-based UI building experience that React offers in the browser, but for command-line apps. It uses [Yoga](https://github.com/facebook/yoga) for Flexbox layouts in the terminal.
11
12**Important:** All text must be wrapped in a [`<Text>`](references/text.md) component.
13
14## Quick Example
15
16```jsx
17import {render, Text, Box} from 'ink';
18
19render(
20 <Box borderStyle="round" padding={1}>
21 <Text color="green">Hello World</Text>
22 </Box>
23);
24```
25
26## Components
27
28- **[`<Text>`](references/text.md)** - Display text with styling (color, bold, italic, underline, etc.)
29- **[`<Box>`](references/box-layout.md)** - Flexbox container for layouts
30 - [Layout Properties](references/box-layout.md) - dimensions, flex, spacing, alignment
31 - [Visual Properties](references/box-styling.md) - borders, colors, backgrounds
32- **[`<Newline>`](references/spacer-newline.md)** - Insert newline characters
33- **[`<Spacer>`](references/spacer-newline.md)** - Flexible space that expands to fill available space
34- **[`<Static>`](references/static.md)** - Permanently render output above everything else (for logs, completed tasks)
35- **[`<Transform>`](references/transform.md)** - Transform string representation before output
36
37## Hooks
38
39### Interaction
40- **[`useInput()`](references/input.md)** - Handle keyboard input (arrow keys, enter, escape, etc.)
41- **[`useFocus()`](references/focus.md)** - Make components focusable with Tab key
42- **[`useFocusManager()`](references/focus.md)** - Programmatically manage focus
43
44### Lifecycle & Streams
45- **[`useApp()`](references/lifecycle.md)** - Exit the app programmatically
46- **[`useStdin()`](references/input.md)** - Access stdin stream and setRawMode
47- **[`useStdout()`](references/lifecycle.md)** - Access stdout stream and write output
48- **[`useStderr()`](references/lifecycle.md)** - Access stderr stream
49
50### Accessibility
51- **[`useIsScreenReaderEnabled()`](references/screen-reader.md)** - Detect if screen reader is active
52
53## API
54
55- **[`render(tree, options?)`](references/render.md)** - Mount and render your app
56- **[Instance Methods](references/instance.md)** - rerender(), unmount(), waitUntilExit(), clear()
57- **[`measureElement(ref)`](references/measure.md)** - Get width and height of a component
58
59## Guides
60
61- **[Accessibility & Screen Readers](references/accessibility.md)** - ARIA support, screen reader integration
62- **[Testing](references/testing.md)** - Test Ink components with ink-testing-library
63- **[React DevTools](references/devtools.md)** - Debug with React DevTools
64
65## Third-Party Components
66
67See **[references/third-party.md](references/third-party.md)** for a comprehensive list of community components including:
68- Text inputs, spinners, select menus
69- Progress bars, tables, charts
70- Markdown rendering, syntax highlighting
71- And many more
majiayu000