ORIZEN/TUI
We're proudlyOpen Source

Terminal UI ComponentsFor Node.js CLI Apps

A shadcn-style component library for terminal applications.

$npx orizen-tui@latest add spinner
Browse components
orizen --demo
$npx orizen-tui@latest add spinner badge progress
✓ Added 3 components to ./components/ui
⠋Installing dependencies
Progress:██████████░░░░░░░░░░░░░░░░░░░░34%
[default][success][warning][error]

Focus Management

FocusManager context eliminates manual isFocused prop drilling. Tab cycles focus automatically.

Theme System

Deep-merge theme tokens for colors, spacing, and borders. Override anything via ThemeProvider.

60fps Rendering

Built on Ink 5 with tuistate best practices — 80ms intervals, functional updates, cleanup effects.

Install in seconds

Install the CLI, then add components with orizen-tui add. Dependencies (ink, react, orizen-tui-core) are installed automatically.

1
Install dependencies
2
Add components via CLI
3
Import and use
install
add component
app.tsx

Start a new project

Use the init command to scaffold a complete project with TypeScript, dependencies, and starter components ready to go.

1
Run init command
2
Install dependencies
3
Start building
init
install
run
theme.tsx

Theme your way

Override any token in the theme — colors, borders, spacing, animations. Deep merging ensures your customizations blend perfectly with defaults.

primary
Cyan accent color
success
Green for wins
warning
Yellow for caution
error
Red for failures

Keyboard First

Every component responds to arrow keys, enter, space, and escape. No mouse required.

Terminal Native

Runs in any terminal that supports Node.js. macOS, Linux, Windows, SSH, Docker.

Type Safe

Full TypeScript support with strict types. Autocomplete for all props and theme tokens.

Components

View all

Browser previews are simulations. Real components run in terminal apps through Ink.

[default][success][warning][error][info]

Badge

Inline colored label with semantic variants driven by the theme.

Select features:
❯[x]TypeScript
❯[x]ESLint
❯[ ]Prettier
❯[ ]Husky

Checkbox

Arrow-key navigable list of toggleable boolean items.

Overwrite existing file?[Y/n]
Delete 3 files?[y/N]

ConfirmInput

Inline y/n confirmation prompt with configurable default answer.

0 tests passed

Counter

Display component for numeric values. User provides the increment logic.

Pick a file:
>drwxr-xr-x128 Bbin
>drwxr-xr-x 64 Bbooks
>drwxr-xr-x 96 Bmovies

FilePicker

Directory navigator with extension filtering and keyboard navigation.

↑/kmove up
↓/jmove down
←/hmove left

Help

Auto-generated keybinding help panel for terminal UIs.

Groceries72 items
❯Pocky
Ginger
Plantains
Honey Dew
Pineapple
(1–5 of8)

List

Filterable, paginated scrollable list with an integrated loading spinner.

Pick frameworks:(space to toggle)
❯◉React
❯○Vue
❯◉Svelte
❯○Solid

MultiSelect

Arrow-key list with space-to-toggle multi-choice selection.

[default][success][warning][error][info]

Badge

Inline colored label with semantic variants driven by the theme.

Select features:
❯[x]TypeScript
❯[x]ESLint
❯[ ]Prettier
❯[ ]Husky

Checkbox

Arrow-key navigable list of toggleable boolean items.

Overwrite existing file?[Y/n]
Delete 3 files?[y/N]

ConfirmInput

Inline y/n confirmation prompt with configurable default answer.

0 tests passed

Counter

Display component for numeric values. User provides the increment logic.

Pick a file:
>drwxr-xr-x128 Bbin
>drwxr-xr-x 64 Bbooks
>drwxr-xr-x 96 Bmovies

FilePicker

Directory navigator with extension filtering and keyboard navigation.

↑/kmove up
↓/jmove down
←/hmove left

Help

Auto-generated keybinding help panel for terminal UIs.

Groceries72 items
❯Pocky
Ginger
Plantains
Honey Dew
Pineapple
(1–5 of8)

List

Filterable, paginated scrollable list with an integrated loading spinner.

Pick frameworks:(space to toggle)
❯◉React
❯○Vue
❯◉Svelte
❯○Solid

MultiSelect

Arrow-key list with space-to-toggle multi-choice selection.

[default][success][warning][error][info]

Badge

Inline colored label with semantic variants driven by the theme.

Select features:
❯[x]TypeScript
❯[x]ESLint
❯[ ]Prettier
❯[ ]Husky

Checkbox

Arrow-key navigable list of toggleable boolean items.

Overwrite existing file?[Y/n]
Delete 3 files?[y/N]

ConfirmInput

Inline y/n confirmation prompt with configurable default answer.

0 tests passed

Counter

Display component for numeric values. User provides the increment logic.

Pick a file:
>drwxr-xr-x128 Bbin
>drwxr-xr-x 64 Bbooks
>drwxr-xr-x 96 Bmovies

FilePicker

Directory navigator with extension filtering and keyboard navigation.

↑/kmove up
↓/jmove down
←/hmove left

Help

Auto-generated keybinding help panel for terminal UIs.

Groceries72 items
❯Pocky
Ginger
Plantains
Honey Dew
Pineapple
(1–5 of8)

List

Filterable, paginated scrollable list with an integrated loading spinner.

Pick frameworks:(space to toggle)
❯◉React
❯○Vue
❯◉Svelte
❯○Solid

MultiSelect

Arrow-key list with space-to-toggle multi-choice selection.

[default][success][warning][error][info]

Badge

Inline colored label with semantic variants driven by the theme.

Select features:
❯[x]TypeScript
❯[x]ESLint
❯[ ]Prettier
❯[ ]Husky

Checkbox

Arrow-key navigable list of toggleable boolean items.

Overwrite existing file?[Y/n]
Delete 3 files?[y/N]

ConfirmInput

Inline y/n confirmation prompt with configurable default answer.

0 tests passed

Counter

Display component for numeric values. User provides the increment logic.

Pick a file:
>drwxr-xr-x128 Bbin
>drwxr-xr-x 64 Bbooks
>drwxr-xr-x 96 Bmovies

FilePicker

Directory navigator with extension filtering and keyboard navigation.

↑/kmove up
↓/jmove down
←/hmove left

Help

Auto-generated keybinding help panel for terminal UIs.

Groceries72 items
❯Pocky
Ginger
Plantains
Honey Dew
Pineapple
(1–5 of8)

List

Filterable, paginated scrollable list with an integrated loading spinner.

Pick frameworks:(space to toggle)
❯◉React
❯○Vue
❯◉Svelte
❯○Solid

MultiSelect

Arrow-key list with space-to-toggle multi-choice selection.

Dots
●●●●●●●
Numeric
1 /7

Paginator

Dot-style or numeric page navigation indicator.

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░0%
████████████████████░░░░░░░░░░65%
██████████████████████████████100%

Progress

Horizontal progress bar with determinate and indeterminate modes.

Pick a framework:
❯React
❯Vue
❯Svelte
❯Solid

Select

Arrow-key navigable single-choice list with full keyboard support.

⠋Loading…◐Processing▁Building

Spinner

Animated terminal spinner with named presets and customizable frames.

Elapsed: 00:00
s stop•r reset•q quit

Stopwatch

Count-up elapsed time tracker with pause support.

#CityPop
──────────────────────────────
6Mexico Ci…22,085,140
7Cairo21,750,020
8Beijing21,333,332
9Mumbai20,961,472

Table

Navigable data table with column alignment and scroll.

Exiting in 00:06
s stop•r reset•q quit

Timer

Countdown timer with configurable duration and expiry callback.

viewport
> He holds him with a skinny hand,
'There was a ship,' quoth he.
'Hold off! unhand me, grey-beard loon!'
An artichoke, dropt he.
 
--Samuel Taylor Coleridge
██░░░░

Viewport

Scrollable content area with overflow indicators and keyboard navigation.

Dots
●●●●●●●
Numeric
1 /7

Paginator

Dot-style or numeric page navigation indicator.

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░0%
████████████████████░░░░░░░░░░65%
██████████████████████████████100%

Progress

Horizontal progress bar with determinate and indeterminate modes.

Pick a framework:
❯React
❯Vue
❯Svelte
❯Solid

Select

Arrow-key navigable single-choice list with full keyboard support.

⠋Loading…◐Processing▁Building

Spinner

Animated terminal spinner with named presets and customizable frames.

Elapsed: 00:00
s stop•r reset•q quit

Stopwatch

Count-up elapsed time tracker with pause support.

#CityPop
──────────────────────────────
6Mexico Ci…22,085,140
7Cairo21,750,020
8Beijing21,333,332
9Mumbai20,961,472

Table

Navigable data table with column alignment and scroll.

Exiting in 00:06
s stop•r reset•q quit

Timer

Countdown timer with configurable duration and expiry callback.

viewport
> He holds him with a skinny hand,
'There was a ship,' quoth he.
'Hold off! unhand me, grey-beard loon!'
An artichoke, dropt he.
 
--Samuel Taylor Coleridge
██░░░░

Viewport

Scrollable content area with overflow indicators and keyboard navigation.

Dots
●●●●●●●
Numeric
1 /7

Paginator

Dot-style or numeric page navigation indicator.

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░0%
████████████████████░░░░░░░░░░65%
██████████████████████████████100%

Progress

Horizontal progress bar with determinate and indeterminate modes.

Pick a framework:
❯React
❯Vue
❯Svelte
❯Solid

Select

Arrow-key navigable single-choice list with full keyboard support.

⠋Loading…◐Processing▁Building

Spinner

Animated terminal spinner with named presets and customizable frames.

Elapsed: 00:00
s stop•r reset•q quit

Stopwatch

Count-up elapsed time tracker with pause support.

#CityPop
──────────────────────────────
6Mexico Ci…22,085,140
7Cairo21,750,020
8Beijing21,333,332
9Mumbai20,961,472

Table

Navigable data table with column alignment and scroll.

Exiting in 00:06
s stop•r reset•q quit

Timer

Countdown timer with configurable duration and expiry callback.

viewport
> He holds him with a skinny hand,
'There was a ship,' quoth he.
'Hold off! unhand me, grey-beard loon!'
An artichoke, dropt he.
 
--Samuel Taylor Coleridge
██░░░░

Viewport

Scrollable content area with overflow indicators and keyboard navigation.

Dots
●●●●●●●
Numeric
1 /7

Paginator

Dot-style or numeric page navigation indicator.

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░0%
████████████████████░░░░░░░░░░65%
██████████████████████████████100%

Progress

Horizontal progress bar with determinate and indeterminate modes.

Pick a framework:
❯React
❯Vue
❯Svelte
❯Solid

Select

Arrow-key navigable single-choice list with full keyboard support.

⠋Loading…◐Processing▁Building

Spinner

Animated terminal spinner with named presets and customizable frames.

Elapsed: 00:00
s stop•r reset•q quit

Stopwatch

Count-up elapsed time tracker with pause support.

#CityPop
──────────────────────────────
6Mexico Ci…22,085,140
7Cairo21,750,020
8Beijing21,333,332
9Mumbai20,961,472

Table

Navigable data table with column alignment and scroll.

Exiting in 00:06
s stop•r reset•q quit

Timer

Countdown timer with configurable duration and expiry callback.

viewport
> He holds him with a skinny hand,
'There was a ship,' quoth he.
'Hold off! unhand me, grey-beard loon!'
An artichoke, dropt he.
 
--Samuel Taylor Coleridge
██░░░░

Viewport

Scrollable content area with overflow indicators and keyboard navigation.

Ready to build?

Start with a single component. Copy the code, customize the styles, and ship your terminal app today.

Get StartedView on GitHub