Opinionated design-system library for Ink CLIs — pre-styled components and design tokens for a consistent terminal UI.
Why ink-ui
Stop reinventing spinners and badge colours. ink-ui gives you a complete design system so every screen in your CLI looks and feels cohesive.
Banner, Header, Badge, Spinner, and Table — all pre-styled and immediately usable. No configuration required.
A shared colour palette and spacing scale to keep every screen in your CLI consistent without guessing.
Ships compiled TypeScript with full type definitions. Import and render — that's it. No build plugins or transforms needed.
Works with any Ink ≥ 4 and React ≥ 18 setup. No version lock-in. Drop it into an existing project without friction.
Every component accepts standard Ink primitives, so you can mix ink-ui with your own layouts freely.
Exported types — BadgeVariant, Column,
Color, Spacing — make props
self-documenting in any IDE.
Quick Start
Install the package, import the components you need, and render them inside your Ink app.
Step 1 — Install
npm install @kud/ink-ui
# peer deps if not already installed
npm install ink reactStep 2 — Expected output
◆ My CLI v1.0.0
Dependencies
Fetching packages…
[installed] [outdated]
⠋ Loading…
Package Version
ink 5.0.0
react 18.3.1Step 3 — Import and render
import React from "react"
import { render } from "ink"
import { Banner, Header, Badge, Spinner, Table } 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…" />
<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" },
]}
/>
</>
)
render(<App />)Component Reference
Each component is pre-styled, fully typed, and composable with standard Ink primitives.
title, subtitle, and
icon props. The icon renders in accent colour.
layout
subtitle renders dimmed below the
heading.
layout
[label] tag with semantic colour variants:
success, error, warning,
info. Defaults to info.
feedback
label prop to show dimmed text beside the
spinner.
feedback
columns (key, header, width) and
data arrays. Truncates long values cleanly.
data
Design Tokens
Import colors and spacing to keep your own
components aligned with the design system.
import { colors, spacing } from "@kud/ink-ui"