caret-tui v1.0.0 — built on Ink

Terminal apps thatlook designed.

Nineteen React components for the command line — tables, trees, command palettes, sparklines, wizards — with a theme engine and focus management already wired up. Everything below is rendered live, in your browser, exactly as it draws in a terminal.

$npm install caret-tui
~/monorepo — caret deploylive render
caret · deploy-cli prod · eu-west-1 [ v1.0.0 ]
Build Deploy Verify
explorer cluster health activity
apps/ cpu 24% bundled 128 modules
web/ mem 73% pushed image sha256:9a1f
page.tsx net 63% rolling restart 3/3
layout.tsx health check passed
worker/ build 30% cdn cache purged
packages/ refreshed 2s ago
ui/
config/ deployments
turbo.json SERVICE STATUS TOOK web deployed
web LIVE 12.4s
api-gateway deploying
worker queued
λ caret deploy --env prod
navigate select ^k palette s sort q quit
19
components
1
import
0
config
OKLCH
theme engine
01 // Syntax

You write JSX.
Caret draws the terminal.

No ANSI escape codes, no manual string padding, no cursor math. Declare the interface and let the renderer handle the grid.

Titled containers with an embedded footer and theme-aware borders.

app.tsx
import { Card, Badge, Text } from 'caret-tui';

const App = () => (
  <Card
    title="System Status"
    footer="Updated 1m ago"
    variant="success"
  >
    <Text>All systems are operational.</Text>
    <Badge variant="success">3 regions live</Badge>
  </Card>
);
terminal output
System Status
All systems are operational.
3 regions live [ 0 incidents ]
Updated 1m ago
02 // Library

Nineteen components,
all of them live.

Not a screenshot gallery. Every tile below is the real render, animating in place. Click one to open its documentation.

<Badge />docs →
primary success
warning error
secondary [ outline ]

Status labels in six variants.

<Box />docs →
round
double

The layout primitive, with themed borders.

<Card />docs →
Build
compiled 128 modules
42s

Title in the top border, footer in the bottom.

<CommandInput />docs →
λ deploy --prod
*******
tab completes the suggestion

History, ghost-text completion and masking.

<DataTable />docs →
POD CPU STATE
job-91bd 94% hot
web-2a41 48% ok
api-7f9c 12% ok

Sortable, paginated, keyboard-driven tables.

<FileTree />docs →
src/
index.ts
theme.ts
package.json

Nested, collapsible directory views.

<Markdown />docs →
Release notes
Ships with 19 components.
theme engine
focus management
Run npm start to begin.

Headings, links, lists and code, in the terminal.

<NotificationProvider />docs →
Deployed to production
! Cache miss on eu-west-1

Queued toasts from anywhere via useNotify().

<Overlay />docs →
Discard changes?
[y] / [n]

Masks the layout underneath for modals.

<Pane />docs →
logs stats
build ok rps 1.2k
served p99 84ms

Split layouts with titled sections.

<ProgressBar />docs →
download
0%
verify
78%
quota
93%

Linear progress with variants and labels.

<ScrollableList />docs →
commit a91f2 · theme tokens
commit 77c30 · focus ring
commit 5be11 · table sort
commit 21ad9 · docs pass

Fixed viewport with a proportional scrollbar.

<SearchModal />docs →
Command Palette
to
VIEW
Toggle Terminal
Toggle Sidebar
move · run · esc

A command palette for your CLI.

<Select />docs →
npm
the default registry client
pnpm
yarn (disabled)

Single choice with descriptions and disabled items.

<Separator />docs →
Top section
Middle section
Bottom section

Horizontal rules that follow the theme.

<Sparkline />docs →
cpu
mem

Inline block charts for live metrics.

<Spinner />docs →
dots arc
- line grow
bounce arrow
triangle

Nine animation styles for background work.

<StepWizard />docs →
Setup Install Done
prev next

Breadcrumb tracker for multi-step flows.

<Text />docs →
default primary secondary
success warning error
muted text bold text

Theme-aware typography with colour variants.

19 of 19 shownEvery prop, every variant, in the reference
03 // Interaction

Focus a pane.
Use your keyboard.

Keyboard navigation, focus management, sorting and filtering ship with the components. Click into any pane below and drive it exactly as you would in a terminal.

SearchModalclick to focus
Command Palette
Search for an action
FILE
Create New File
Save All
VIEW
Toggle Terminal
Split Editor Right
TASKS
Run Deploy Task
Restart Language Server
move · run · esc

type to filter · ↑↓ move · ⏎ run · esc reset

FileTreeclick to focus
src/
components/
DataTable.tsx
FileTree.tsx
Select.tsx
hooks/
index.ts
examples/
package.json
README.md
select a file with

↑↓ move · space toggle · ⏎ open

DataTableclick to focus
RUN BRANCH STATUS TIME
1041 main PASS 2m 14s
1040 feat/theme FAIL 1m 02s
1039 fix/focus PASS 3m 41s
Page 1/2 · / page · s sort

←/→ paginate · s sort · ↑↓ move

04 // Theme

One palette,
every component.

Variants are semantic, not hardcoded colours. Set the theme once and Badge, ProgressBar, Sparkline, Card and the rest pick it up — with full OKLCH support for wide-gamut terminals.

primary PRIMARY
secondary SECONDARY
success SUCCESS
warning WARNING
error ERROR

Your next CLI deserves
better than console.log.

Install the package, import a component, and the terminal does the rest.

$npm install caret-tui