react-ink

When this skill is activated, always start your first response with the 🧢 emoji.

React Ink

React Ink brings React's component model to the terminal. Instead of rendering to the DOM, Ink renders to stdout using a custom React reconciler backed by Yoga layout engine (the same Flexbox implementation used by React Native). Build interactive CLI tools with components like <Box> for layout and <Text> for styled output, handle keyboard input with useInput, and manage focus with useFocus - all using familiar React patterns including hooks, state, effects, Suspense, and concurrent rendering.

---

When to use this skill

Trigger this skill when the user:

• Wants to build an interactive CLI application using React
• Needs terminal UI components with Flexbox layout (Box, Text)
• Is handling keyboard input in a terminal app with useInput
• Wants focus management across terminal UI elements
• Needs to display progress, spinners, or streaming logs in a CLI
• Is scaffolding a new CLI project with create-ink-app
• Wants to render styled text with colors, borders, or formatting in the terminal

Do NOT trigger this skill for:

• General React web or React Native development (use frontend-developer)
• Simple shell scripts that just print output (use shell-scripting)

---

Setup & authentication

Installation

npm install ink react

Or scaffold a full project:

npx create-ink-app my-cli
npx create-ink-app my-cli --typescript

Requirements: Node >= 20, React >= 19. Ink v6+ is ESM-only ("type": "module" in package.json).

Basic app

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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prev => prev + 1);
    }, 100);
    return () => clearInterval(timer);
  }, []);

  return <Text color="green">{count} tests passed</Text>;
}

render(<Counter />);

---