--- 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](https:\/\/github.com\/facebook\/yoga) for Flexbox layouts in the terminal. **Important:** All text must be wrapped in a [``](references\/text.md) component. ## Quick Example ```jsx import {render, Text, Box} from 'ink'; render( Hello World<\/Text> <\/Box> ); ``` ## Components - **[``](references\/text.md)** - Display text with styling (color, bold, italic, underline, etc.) - **[``](references\/box-layout.md)** - Flexbox container for layouts - [Layout Properties](references\/box-layout.md) - dimensions, flex, spacing, alignment - [Visual Properties](references\/box-styling.md) - borders, colors, backgrounds - **[``](references\/spacer-newline.md)** - Insert newline characters - **[``](references\/spacer-newline.md)** - Flexible space that expands to fill available space - **[``](references\/static.md)** - Permanently render output above everything else (for logs, completed tasks) - **[``](references\/transform.md)** - Transform string representation before output ## Hooks ### Interaction - **[`useInput()`](references\/input.md)** - Handle keyboard input (arrow keys, enter, escape, etc.) - **[`useFocus()`](references\/focus.md)** - Make components focusable with Tab key - **[`useFocusManager()`](references\/focus.md)** - Programmatically manage focus ### Lifecycle & Streams - **[`useApp()`](references\/lifecycle.md)** - Exit the app programmatically - **[`useStdin()`](references\/input.md)** - Access stdin stream and setRawMode - **[`useStdout()`](references\/lifecycle.md)** - Access stdout stream and write output - **[`useStderr()`](references\/lifecycle.md)** - Access stderr stream ### Accessibility - **[`useIsScreenReaderEnabled()`](references\/screen-reader.md)** - Detect if screen reader is active ## API - **[`render(tree, options?)`](references\/render.md)** - Mount and render your app - **[Instance Methods](references\/instance.md)** - rerender(), unmount(), waitUntilExit(), clear() - **[`measureElement(ref)`](references\/measure.md)** - Get width and height of a component ## Guides - **[Accessibility & Screen Readers](references\/accessibility.md)** - ARIA support, screen reader integration - **[Testing](references\/testing.md)** - Test Ink components with ink-testing-library - **[React DevTools](references\/devtools.md)** - Debug with React DevTools ## Third-Party Components See **[references\/third-party.md](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