👋 Introduction
An opinionated design-system library for Ink CLIs — pre-styled components and design tokens for a consistent terminal UI.
ink-ui is an opinionated design-system library for Ink CLIs. Instead of styling every <Text> and <Box> by hand, you get pre-styled components and a shared set of design tokens — so every screen in your CLI looks coherent out of the box.
A warm #FF8C00 accent colour gives your CLI a distinctive, consistent identity, and exported types (BadgeVariant, Column, Hint, TabItem, Color, Spacing) keep props self-documenting in any IDE.
✨ Features
- Ten ready-made components — Banner, Header, Badge, Spinner, Table, Tabs, FooterHints, LoadingScreen, KeyValue, and SelectableRow, pre-styled and immediately usable.
- Design tokens included — a shared colour palette and spacing scale to keep every screen consistent.
- ESM only, zero config — ships compiled TypeScript with full type definitions; just import and render.
📦 Install
npm install @kud/ink-uiink and react are peer dependencies (Ink ≥ 4, React ≥ 18) — add them if you haven't already:
npm install ink react⚡ Usage
import React from "react";
import { render } from "ink";
import {
Banner,
Header,
Badge,
Spinner,
Table,
Tabs,
FooterHints,
} from "@kud/ink-ui";
const App = () => (
<>
<Banner title="My CLI" subtitle="v1.0.0" icon="◆" />
<Header subtitle="Fetching packages…">Dependencies</Header>
<Badge variant="success">installed</Badge>
<Badge variant="warning">outdated</Badge>
<Spinner label="Loading…" />
<Tabs
active="open"
items={[
{ value: "open", label: "Open", count: 3 },
{ value: "done", label: "Done", count: 7 },
]}
/>
<Table
columns={[
{ key: "name", header: "Package", width: 20 },
{ key: "version", header: "Version", width: 10 },
]}
data={[
{ name: "ink", version: "5.0.0" },
{ name: "react", version: "18.3.1" },
]}
/>
<FooterHints
hints={[
["↑↓", "navigate"],
["q", "quit"],
]}
/>
</>
);
render(<App />);Expected output (approximate terminal rendering):
◆ My CLI v1.0.0
Dependencies
Fetching packages…
[installed] [outdated]
⠋ Loading…
Package Version
ink 5.0.0
react 18.3.1
↑↓ navigate q quit🚀 Next steps
- Browse the components: Banner, Header, Badge, Spinner, Table, Tabs, FooterHints, LoadingScreen, KeyValue, SelectableRow.
- Align your own components with the shared palette and spacing scale in Design Tokens.