kud/ink-ui

<div align="center"

React component library for Ink CLIs

<a href="https://kud.io/projects/ink-ui"Website</a · <a href="https://kud.io/projects/ink-ui/docs"Documentation</a

</div

Features

• 27 ready-made components, pre-styled and ready to drop in:
• Inputs — TextInput, EmailInput (domain completion), PasswordInput (masked), ConfirmInput
• Lists — UnorderedList, OrderedList (both nestable), Table
• Selection & navigation — Select, MultiSelect, Tabs, Switch, Toggle, SelectableRow
• Status & feedback — Spinner, ProgressBar, StatusMessage, Alert, Badge, Toast
• Layout & chrome — Banner, Header, Panel (bordered pane, optional focus state), Columns, FooterHints, KeyValue, LoadingScreen, ScrollView

• Behaviour hooks — useTabs and useListCursor own the keyboard state that every consumer used to hand-roll, so Tab/Shift+Tab and arrow/vim navigation behave the same everywhere
• Full @inkjs/ui parity — every upstream component has an equivalent, plus a dozen more the design system adds on top
• Colourblind-safe by design — state is signalled by shape, case, and glyph, never colour alone
• Design tokens included — a shared colour palette (colors) and spacing scale (spacing) to keep every screen consistent
• Full TypeScript support — ships compiled output with .d.ts declarations for every component and token type
• ESM only, zero config — no runtime bundling step; just import and render

• Peer-dependency light — only requires ink ≥ 7 and react ≥ 19

Install

npm install @kud/ink-ui

ink and react are peer dependencies and must be installed separately:

npm install ink react

Building with an AI agent

The package ships AGENTS.md, a short brief covering the composition rules and house conventions that the type definitions cannot express — which components own the keyboard, what to compose for a given screen, and the traps. Point your agent at it:

node_modules/@kud/ink-ui/AGENTS.md

Usage

import React from "react"
import { render } from "ink"
import { Banner, Header, Badge, Spinner, colors } from "@kud/ink-ui"

const App = () => (
  <>
    <Banner title="my-tool" subtitle="v1.0.0" />
    <Header subtitle="Synchronising files…">Status</Header>
    <Badge variant="success">done</Badge>
    <Spinner label="Loading…" />
  </>
)

render(<App /)