π 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.