inktui

Ink — React for CLIs

Ink is a React renderer for terminal applications. It uses Yoga (flexbox) for layout and renders to stdout. Every element is a flex container — think <div style="display: flex"> for the terminal.

Quick Start

# Scaffold a new project
npx create-ink-app my-cli              # JavaScript
npx create-ink-app --typescript my-cli # TypeScript

Or add to an existing project:

npm install ink react
npm install @inkjs/ui  # Optional: pre-built UI components

Core Architecture

Ink apps are React component trees rendered via render(). The process stays alive while there's work in the event loop. Exit via Ctrl+C, useApp().exit(), or instance.unmount().

import React, {useState} from 'react';
import {render, Text, Box} from 'ink';

function App() {
  const [count, setCount] = useState(0);
  return (
    <Box flexDirection="column">
      <Text>Count: {count}</Text>
      <Text color="green">Press q to quit</Text>
    </Box>
  );
}

render(<App />);

Reference Files

Read these for detailed API documentation and examples:

• references/components.md — All Ink core components (Box, Text, Newline, Spacer, Static, Transform) with full props
• references/hooks.md — All hooks (useInput, useApp, useFocus, useFocusManager, useStdin, useStdout, useStderr, useWindowSize, useBoxMetrics, useCursor, usePaste)
• references/ink-ui.md — All @inkjs/ui components (TextInput, Select, MultiSelect, Spinner, ProgressBar, Alert, Badge, StatusMessage, ConfirmInput, EmailInput, PasswordInput, OrderedList, UnorderedList) with props and theming
• references/patterns.md — Common patterns: multi-step wizards, loading states, tables, command routing, testing, fullscreen apps, and real-world examples

Key Concepts

Layout is Flexbox

Every element is a flex container. Use <Box> for layout with standard flex props: flexDirection, justifyContent, alignItems, gap, padding, margin, etc. Percentage widths/heights are supported.