Fancy UI KitFancy UI Kitv0.4
DocsPackagesTUIFlowStarter KitsInspirationShowcaseLeaderboard
Sign in
FT

fancy-tui

@particle-academy/fancy-tui

Ink components for Human+ terminal apps — consistent layout, controlled inputs, scrollback-safe conversations, and durable push + inbox MCP workflows.

TSUI · 52 components52 components
$npm install @particle-academy/fancy-tui
Live sandbox →README →GitHub →npm →Issues →
Pairs withagent-integrationsfancy-term
Authoring surface
Humans compose it

Controlled value + onChange, JSON-friendly props, terse defaults — so people (and agents) build it fast.

Inhabited surface
Agents drive it over MCP

A bridge in @particle-academy/agent-integrations exposes typed tools — agents read and mutate state through stable handles, never DOM scraping.

tui_surfaces_listtui_surface_readtui_action_invoke
Why
Agent CLIs repeatedly rebuild the same hard terminal UX: Yoga layouts, scrollback that does not repaint, multiline editing, capability-sensitive keyboard handling, and status vocabulary for users, agents, and tools. fancy-tui gives Ink apps the same compositional and Human+ conventions as Fancy UI browser surfaces without pretending a terminal is a browser.
What
A React 19 + Ink 7 component library built on Ink's Yoga layout engine. It includes themed layout shells, controlled inputs, navigation, tables and trees, ANSI Markdown and highlighted code, <Static>-backed message history, a separate live region, and a grapheme-aware multiline composer. Interactive components register stable surface handles so registerTuiBridge can expose reads and mutations over MCP. Human+ events persist before push notification and remain available through a per-consumer inbox with acknowledgement and staged confirmation.
How
Install npm i @particle-academy/fancy-tui ink react, wrap the app in <FancyTuiProvider>, and compose the same terse primitives used throughout Fancy: <Header title="Agent console" /><Panel title="Conversation"><MessageList messages={messages} /><LiveRegion>...</LiveRegion><Composer id="prompt" value={prompt} onChange={setPrompt} onSubmit={send} /></Panel>. Add <TuiSurfaceProvider registry={registry}> and register that registry with @particle-academy/agent-integrations for push + inbox MCP delivery. Browse the dual-surface examples at /fancy-tui.

Components

52 components · click any tile for a full demo, source, and install snippet.

FancyTuiProviderOpen →
Deploy agent                                               connected
 
╭──────────────────────────────────────────────────────────────────╮
│ Run                                                              │
│ Ready for instructions.                                          │
╰──────────────────────────────────────────────────────────────────╯
Theme, terminal capabilities, and resize-aware viewport context.
ScreenOpen →
Deploy agent                                               connected
Ready for instructions.
Full-width root terminal layout.
BoxOpen →
╭──────────────────────────────────────────────────────────────────╮
│ Typed Ink/Yoga box                                               │
╰──────────────────────────────────────────────────────────────────╯
Typed Ink/Yoga box primitive.
StackOpen →
First
 
Second
Token-spaced vertical layout.
RowOpen →
 ready  3 workers
Token-spaced horizontal layout.
ColumnOpen →
Queued
 
Running
Semantic vertical column.
SpacerOpen →
left                                                           right
Flexible Yoga spacer.
SeparatorOpen →
Workers ────────────────────────────────────────────────────────────
───────────────────────────────
Horizontal or vertical labeled rule.
PanelOpen →
╔══════════════════════════════════════════════════════════════════╗
║ Run                                                              ║
║ Ready for instructions.                                          ║
╚══════════════════════════════════════════════════════════════════╝
Bordered region with focus and tone states.
CardOpen →
╭──────────────────────────────────────────────────────────────────╮
│ Deploy                                                           │
│ Production                                                       │
│                                                                  │
│ 2 pending approvals.                                             │
│                                                                  │
│ [Enter] approve                                                  │
╰──────────────────────────────────────────────────────────────────╯
Compound header, body, and footer surface.
HeaderOpen →
Fancy TUI Human+ terminal                                  connected
Application title, subtitle, and status.
StatusBarOpen →
┌──────────────────────────────────────────────────────────────────┐
│ 3 workers                   main                  Ctrl+R refresh │
└──────────────────────────────────────────────────────────────────┘
Left, center, and right status regions.
ResponsiveOpen →
wide layout
Terminal-width-aware conditional layout.
SidebarOpen →
  Build
› Test
  Deploy
Compact controlled navigation rail.
TextOpen →
Default
Muted
Danger
Theme-aware terminal text.
HeadingOpen →
█ Pipeline
▌ Workers
Semantic terminal heading levels.
KeyHintOpen →
[Tab] focus [Alt+Enter] newline
Keyboard shortcut label.
BadgeOpen →
 passing   flaky   failed
Compact semantic status badge.
CalloutOpen →
┌──────────────────────────────────────────────────────────────────┐
│ Heads up                                                         │
│ Destructive actions wait for human confirmation.                 │
└──────────────────────────────────────────────────────────────────┘
Toned informational panel.
SpinnerOpen →
⠋ thinking…
Animated activity indicator.
ProgressOpen →
██████████████░░░░░░ context 72%
Determinate text-mode progress bar.
ActivityIndicatorOpen →
⠋ integration
Idle, pending, success, and failure marker.
TimelineOpen →
├─ queued
   12.4s
├─ building
   8.1s
└─ deploy
Vertical event and activity history.
ButtonOpen →
[ Run ] [ Stop ]
Stable-handle terminal action.
FormOpen →
Branch
╔══════════════════════════════════════════════════════════════════╗
║ main▌                                                            ║
╚══════════════════════════════════════════════════════════════════╝
Token-spaced form shell.
FieldOpen →
Token
╔══════════════════════════════════════════════════════════════════╗
║ ▌paste token                                                     ║
╚══════════════════════════════════════════════════════════════════╝
Stored in your keychain.
Required
Label, description, error, and input composition.
InputOpen →
╔══════════════════════════════════════════════════════════════════╗
║ main▌                                                            ║
╚══════════════════════════════════════════════════════════════════╝
Controlled single-line input.
MultilineInputOpen →
╔══════════════════════════════════════════════════════════════════╗
║ Summarize the failing build▌                                     ║
╚══════════════════════════════════════════════════════════════════╝
Grapheme-aware buffer, cursor, selection, and enhanced keyboard support.
CheckboxOpen →
1. [x] Run in CI
Controlled boolean choice.
CheckboxGroupOpen →
1. [x] Build
2. [ ] Test
3. [ ] Deploy
Controlled multiple-choice list.
RadioGroupOpen →
1. ○ Build
2. ● Test
3. ○ Deploy
Controlled exclusive-choice list.
SwitchOpen →
1. [x] Verbose ON
Controlled on/off setting.
MultiSwitchOpen →
1. ○ Build
2. ● Test
3. ○ Deploy
Segmented terminal option switch.
SelectOpen →
1. ○ Build
2. ○ Test
3. ● Deploy
Controlled selection list.
AutocompleteOpen →
╔══════════════════════════════════════════════════════════════════╗
║ te▌                                                              ║
╚══════════════════════════════════════════════════════════════════╝
 
1. ● Test
Query-filtered selection.
PillboxOpen →
[ci] [nightly] ╔══════════╗
               ║ ▌add tag ║
               ╚══════════╝
Controlled removable-value list.
SliderOpen →
──────●──── 60
Keyboard-adjustable numeric control.
TabsOpen →
[ Build ] [ Test ] [ Deploy ]
Controlled terminal tab navigation.
AccordionOpen →
[ ▾ Build ]
  Compiles the workspace.
[ ▸ Test ]
Controlled expandable sections.
MenuOpen →
  Build
› Test
  Deploy
Stable-handle action menu.
ModalOpen →
Deploy agent                                               connected
2 approvals pending · main@8f2c1d
worker-01 · wor╭───────────────────────────────────╮
queued: compile│ Deploy to production?       [esc] │fy
               │ This replaces 3 running services. │
               │                                   │
               │                                   │
               │                         [ Close ] │
               ╰───────────────────────────────────╯
 
 
 
Opaque centered overlay, with an inline fallback.
DrawerOpen →
Jobs                                     ╭─────────────────────────╮
compile · integration · package · publish│ Filters           [esc] │
worker-01 · worker-02 · worker-03 · worke│ state: failing          │
retries: 2 · queue depth: 11 · oldest: 4m│ branch: main            │
                                         │                         │
                                         │                         │
                                         │                         │
                                         │                         │
                                         │             enter apply │
                                         ╰─────────────────────────╯
Edge-anchored panel — any side, attachable to a region.
CommandOpen →
╭──────────────────────────────────────────────────────────────────╮
│ Command                                                          │
│ Search: …                                                        │
│                                                                  │
│ [ Build ]                                                        │
│                                                                  │
│ [ Test ]                                                         │
│                                                                  │
│ [ Deploy ]                                                       │
╰──────────────────────────────────────────────────────────────────╯
Searchable command palette.
TableOpen →
JOB            │ STATE         
───────────────────────────────
  compile        │ success       
› integration    │ running
Typed table with stable row identities.
TreeNavOpen →
▾ src
    index.ts
Controlled hierarchy navigation.
FileBrowserOpen →
repo
› ▸ src
  · package.json
Controlled path and file selection.
MarkdownOpen →
## Result
 
The build passed with 0 warnings.
ANSI Markdown for headings, lists, emphasis, and code.
CodeViewOpen →
┌──────────────────────────────────────────────────────────────────┐
│     1 │ const x = 1;                                             │
│     2 │ export default x;                                        │
└──────────────────────────────────────────────────────────────────┘
Syntax-highlighted terminal code.
MessageListOpen →
 user 
Summarize the failing build.
 agent 
A missing baseUrl breaks the paths.
 
Scrollback-safe committed messages using Ink Static.
LiveRegionOpen →
⠋ thinking…
Mutable activity below committed scrollback.
ToolCallOpen →
⠋ inspect_config tsconfig.json
Agent tool status and detail row.
ComposerOpen →
╔══════════════════════════════════════════════════════════════════╗
║ ▌Message…                                                        ║
╚══════════════════════════════════════════════════════════════════╝
Multiline prompt with Enter submit and Alt+Enter newline.