Architecture#

@sigx/terminal is an umbrella. Installing it gives you a complete TUI stack, but that stack is built from a few focused packages, each usable on its own. Knowing the split helps you import from the right place and understand how theming and rendering fit together.

The packages#

Package	Role
`@sigx/terminal`	Umbrella entry. Re-exports the renderer, the headless foundation and the themed components so you can import everything from one place. Set `jsxImportSource: "@sigx/terminal"` to write TSX.
`@sigx/runtime-terminal`	The renderer. Walks your component tree into ANSI lines and paints them: render modes, layered key dispatch, color-depth detection, output targets, reactive terminal size. The host platform for `@sigx/runtime-core`.
`@sigx/terminal-zero`	Headless foundation. The design-system-neutral half: the token contract, the theme engine (`resolveColor`, `setTheme`), shared glyphs, layout primitives (`Box`, `Row`, `Col`, `Text`, …) and the prompts engine. No fixed look — skins build on it.
`@sigx/terminal-ui`	Themed component library. The SigX-tui skin: forms, feedback, navigation, layout, data, fx and tasks components, plus five built-in themes (default `obsidian`). Built entirely on `terminal-zero` tokens.
`@sigx/terminal-dev`	HMR dev runner. `sigx-terminal-dev <entry>` runs your app under Vite — edit a component, the running TUI patches in place. See Dev mode.
`@sigx/args`	Command & argument parser. A fluent, type-aware CLI parser. Independent of the renderer — it's the engine behind `@sigx/cli`. See Command-line args.

Every package ships from the terminal monorepo in lockstep — browse them all in the package catalog.

How they layer#

@sigx/terminal  (umbrella: re-exports the three below)
├── @sigx/terminal-ui      themed components (obsidian + 4 themes)
│     └── @sigx/terminal-zero    tokens · theme engine · layout · prompts engine
│             └── @sigx/runtime-terminal   the cell renderer + key dispatch
└── @sigx/runtime-core / @sigx/reactivity  (the reactive engine, bundled in)

The renderer sits at the bottom; terminal-zero adds a semantic token layer over it; terminal-ui paints concrete components against those tokens. Because the colours your components ask for are tokens (accent, fg, line, …) resolved at render time, switching the active theme repaints the whole app — see Theming.

What you import#

For application code, import from @sigx/terminal — it carries the reactive primitives (re-exported from core), the box/text/br intrinsics, every component, and the render entry:

TSX

/** @jsxImportSource @sigx/terminal */
import { component, signal, defineApp, Input, Button } from '@sigx/terminal';

The split only matters when you want a piece in isolation — for example building a custom design system on @sigx/terminal-zero, or using @sigx/args in a CLI with no terminal UI.

The reactive engine#

The SignalX core packages — @sigx/reactivity and @sigx/runtime-core — are bundled into the umbrella, just as sigx does on the web and @sigx/lynx does on native. Installing @sigx/terminal brings exactly one copy of core, so signals and effects across every @sigx/* package run on one shared reactivity engine. There is nothing extra to install:

Terminal

pnpm add @sigx/terminal

npm install @sigx/terminal

yarn add @sigx/terminal

bun add @sigx/terminal

See Installation for the full setup.

Next steps#

Getting Started — a minimal app.
Render modes — inline vs fullscreen, non-TTY, resize.
Theming — tokens, themes and resolveColor.
Components — the full component library.