Ink - React for CLIs | Awesome React

Why Ink?

Building interactive command-line tools has traditionally involved managing complex ANSI escape codes and listening to raw stdin streams. Ink abstracts this away, allowing you to build CLIs as if they were React applications.

Declarative UI: Instead of imperatively logging strings and clearing lines, you simply render the state of your UI. Ink handles the diffing and repainting of the terminal output.
Flexbox Layout: Ink includes a Yoga-based layout engine. You can use <Box flexDirection="column"> or <Box justifyContent="space-between"> to create complex layouts that were previously incredibly difficult to achieve in a terminal.
Standard React Hooks: Use useState for counters, useEffect for fetching data, or custom hooks to manage logic. Your React knowledge transfers 100%.
Input Handling: The useInput hook makes handling keyboard shortcuts and navigation trivial, allowing for the creation of select lists, forms, and dashboards.
Proven Stability: Used by major tools like the Gatsby CLI, Prisma CLI, and Jest, proving it can handle production-grade workflows.

Code Snippet

Ink looks exactly like a React Native or Web app, but with specialized components like Text and Box that map to terminal output.

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

const Counter = () => {
  const [count, setCount] = useState(0);

  // Handle keyboard input
  useInput((input, key) => {
    if (input === 'q') {
      process.exit(0); // Exit on 'q'
    }
    if (key.leftArrow) {
      setCount(prev => prev - 1);
    }
    if (key.rightArrow) {
      setCount(prev => prev + 1);
    }
  });

  return (
    <Box flexDirection="column" padding={1} borderStyle="round" borderColor="green">
      <Text color="cyan">Interactive Counter CLI</Text>
      
      <Box marginTop={1}>
        <Text>Current Count: </Text>
        <Text color={count > 0 ? "green" : "red"}>{count}</Text>
      </Box>
      
      <Box marginTop={1}>
        <Text dimColor>Press Left/Right arrows to adjust. Press 'q' to exit.</Text>
      </Box>
    </Box>
  );
};

render(<Counter />);

When executed with node, this script renders a persistent, bordered UI in the terminal that updates instantly in response to keyboard events.

Pros and Cons

No library is perfect; understanding the trade-offs is key to selecting the right tool.

Pros

Superior Developer Experience: Building complex terminal UIs with console.log is painful. Ink makes it structured, readable, and maintainable.
Visual Layouts: The ability to use Flexbox in a terminal is a game-changer for creating dashboards or side-by-side panels.
Component Reusability: You can create a library of CLI components (e.g., <Spinner />, <ProgressBar />, <SelectMenu />) and share them across all your company's internal tools.

Cons

Runtime Overhead: Unlike a simple shell script, an Ink app requires the Node.js runtime and the React library to be loaded, which increases startup time and memory usage.
Terminal Quirks: While Ink tries to normalize behavior, rendering complex layouts can sometimes break on older terminals (like standard Windows CMD) or when resized aggressively.
Overkill for Scripts: If you just need to ask a single "Yes/No" question, standard libraries like prompts or inquirer are lighter and faster.

Comparison with Other CLI Tools

The table below outlines the positioning differences between Ink and other CLI libraries:

Library	Design Philosophy	Best For	Pain Points
Ink	Declarative UI Full React renderer for the terminal.	Rich Applications Installers, Dashboards, Monitors, Wizards.	Overhead Too heavy for simple "one-off" scripts.
Commander.js	Argument Parsing Standard utility for parsing flags/args.	Standard CLIs Tools like `git` or `npm` that take flags and exit.	No UI Doesn't help with rendering interactive interfaces.
Chalk	Styling Only Colorizes strings for stdout.	Simple Output Making logs readable (green for success, red for error).	Imperative You still have to manage the string concatenation manually.
Inquirer.js	Prompt Based Linear sequence of questions.	Scaffolding Asking a user 5 questions in a row.	Rigid Hard to build a non-linear, "dashboard" style UI.

Verdict: When to Adopt

Ink is the only viable choice if you are building a "Dashboard-style" CLI—something that needs to persist on the screen, update in real-time (like a download manager or server monitor), or handle complex navigation. For standard "fire and forget" command-line tools, simpler argument parsers combined with chalk are usually sufficient.

TL;DR