SkillAgentSearch skills...

Ink

🌈 React for interactive command-line apps

Install / Use

/learn @vadimdemedes/Ink
About this skill

Quality Score

0/100

Supported Platforms

Universal

README


<div align="center"> <br> <br> <img width="240" alt="Ink" src="media/logo.png"> <br> <br> <br> </div>

React for CLIs. Build and test your CLI output using components.

Build Status npm

Ink provides the same component-based UI building experience that React offers in the browser, but for command-line apps. It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like properties are available in Ink as well. If you are already familiar with React, you already know Ink.

Since Ink is a React renderer, all features of React are supported. Head over to the React website for documentation on how to use it. Only Ink's methods are documented in this readme.

Fully AI-generated pull requests are not accepted. You can use AI, but should be verified and cleaned up by a human. Only Opus 4.6+ (high-effort) and Codex 5.4+ (extra high) are accepted models. Preferably created with Opus and verified by Codex.


<div align="center"> <p> <p> <sup> <a href="https://opencollective.com/vadimdemedes">My open source work is supported by the community ❤️</a> </sup> </p> </p> </div>

Install

npm install ink react

[!NOTE] This readme documents the upcoming version of Ink. For the latest stable release, see Ink on npm.

Usage

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

const Counter = () => {
	const [counter, setCounter] = useState(0);

	useEffect(() => {
		const timer = setInterval(() => {
			setCounter(previousCounter => previousCounter + 1);
		}, 100);

		return () => {
			clearInterval(timer);
		};
	}, []);

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

render(<Counter />);
<img src="media/demo.svg" width="600">

Who's Using Ink?

  • Claude Code - An agentic coding tool made by Anthropic.
  • Gemini CLI - An agentic coding tool made by Google.
  • GitHub Copilot CLI - Just say what you want the shell to do.
  • Canva CLI - CLI for creating and managing Canva Apps.
  • Cloudflare's Wrangler - The CLI for Cloudflare Workers.
  • Linear - Linear built an internal CLI for managing deployments, configs, and other housekeeping tasks.
  • Gatsby - Gatsby is a modern web framework for blazing-fast websites.
  • tap - A Test-Anything-Protocol library for JavaScript.
  • Terraform CDK - Cloud Development Kit (CDK) for HashiCorp Terraform.
  • Specify CLI - Automate the distribution of your design tokens.
  • Twilio's SIGNAL - CLI for Twilio's SIGNAL conference. Blog post.
  • Typewriter - Generates strongly-typed Segment analytics clients from arbitrary JSON Schema.
  • Prisma - The unified data layer for modern applications.
  • Blitz - The Fullstack React Framework.
  • New York Times - NYT uses Ink's kyt - a toolkit that encapsulates and manages the configuration for web apps.
  • tink - A next-generation runtime and package manager.
  • Inkle - A Wordle game.
  • loki - Visual regression testing tool for Storybook.
  • Bit - Build, distribute, and collaborate on components.
  • Remirror - Your friendly, world-class editor toolkit.
  • Prime - Open-source GraphQL CMS.
  • emoj - Find relevant emojis.
  • emma - Find and install npm packages easily.
  • npm-check-extras - Check for outdated and unused dependencies, and run update/delete actions on selected ones.
  • swiff - Multi-environment command-line tools for time-saving web developers.
  • share - Share files quickly.
  • Kubelive - A CLI for Kubernetes that provides live data about the cluster and its resources.
  • changelog-view - View changelogs.
  • cfpush - Interactive Cloud Foundry tutorial.
  • startd - Turn your React component into a web app.
  • wiki-cli - Search Wikipedia and read article summaries.
  • garson - Build interactive, config-based command-line interfaces.
  • git-contrib-calendar - Display a contributions calendar for any Git repository.
  • gitgud - Interactive command-line GUI for Git.
  • Autarky - Find and delete old node_modules directories to free up disk space.
  • fast-cli - Test your download and upload speeds.
  • tasuku - Minimal task runner.
  • mnswpr - A Minesweeper game.
  • lrn - Learning by repetition.
  • turdle - A Wordle game.
  • Shopify CLI - Build apps, themes, and storefronts for the Shopify platform.
  • ToDesktop CLI - All-in-one platform for building Electron apps.
  • Walle - A full-featured crypto wallet for EVM networks.
  • Sudoku - A Sudoku game.
  • Sea Trader - A Taipan!-inspired trading simulator game.
  • srtd - Live-reloading SQL templates for Supabase projects.
  • tweakcc - Customize your Claude Code styling.
  • argonaut - Manage Argo CD resources.
  • Qodo Command - Build, run, and manage AI agents.
  • Nanocoder - A community-built, local-first AI coding agent with multi-provider support.
  • dev3000 - An AI agent MCP orchestrator and developer browser.
  • Neovate Code - An agentic coding tool made by AntGroup.
  • instagram-cli - Instagram client.
  • ElevenLabs CLI - ElevenLabs agents client.
  • SSH AI Chat - Chat with AI over SSH.

(PRs welcome. Append new entries at the end. Repos must have 100+ stars and showcase Ink beyond a basic list picker.)

Contents

Getting Started

Use create-ink-app to quickly scaffold a new Ink-based CLI.

npx create-ink-app my-ink-cli

Alternatively, create a TypeScript project:

npx create-ink-app --typescript my-ink-cli
<details><summary>Manual JavaScript setup</summary> <p> Ink requires the same Babel setup as you would do for regular React-based apps in the browser.

Set up Babel with a React preset to ensure all examples in this readme work as expected. After installing Babel, install @babel/preset-react and insert the following configuration in babel.config.json:

npm install --save-dev @babel/preset-react
{
	"presets": ["@babel/preset-react"]
}

Next, create a file source.js, where you'll type code that uses Ink:

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

const Demo = () => <Text>Hello World</Text>;

render(<Demo />);

Then, transpile this file with Babel:

npx babel source.js -o cli.js

Now you can run cli.js with Node.js:

node cli

If you don't like transpiling files during development, you can use [import-jsx](https://gi

View on GitHub
GitHub Stars37.2k
CategoryDevelopment
Updated28m ago
Forks938

Languages

TypeScript

Security Score

100/100

Audited on Apr 5, 2026

No findings