@elabs-ai/components-terminal

Terminal surfaces: shell/agent output and coding-agent CLI look-alikes.

Part of brand-ui, a source-owned, token-driven React component system. Published to the public npm registry under the @elabs-ai scope — it installs like any other npm dependency, with no registry configuration and no token required. See docs/CONSUMING.md.

Install

pnpm add @elabs-ai/components-tokens @elabs-ai/components-terminal
pnpm add @xterm/addon-fit@"^0.11.0"  # optional peer
pnpm add @xterm/xterm@"^6.0.0"  # optional peer

Set up styling (do not skip)

Components are Tailwind v4 classes backed by semantic tokens. Two lines in your CSS entry, or everything renders unstyled — the single most common mistake:

@import "@elabs-ai/components-tokens/styles.css";
@source "../node_modules/@elabs-ai/components-terminal/dist";

The @source line is required because Tailwind ignores node_modules. Add one per brand-ui package you render. Then wrap your app once:

import { ThemeProvider } from "@elabs-ai/components-tokens";

<ThemeProvider defaultTheme="light">{children}</ThemeProvider>;

What's in it

31 exported components — including DEFAULT_TERMINAL_GUTTER, InteractiveTerminal, Terminal, TERMINAL_TOOL_CALL_STATUSES, TERMINAL_TRANSCRIPT_ROW_KINDS.

Don't guess the API — ask the CLI:

pnpm add -D @elabs-ai/components-cli
pnpm exec brand-ui search <query>   # find a component
pnpm exec brand-ui docs <Name>      # its real props, from source

Using an AI coding agent?

For Claude Code, install the plugin from this repo's checkout:

/plugin marketplace add .
/plugin install brand-ui

brand-ui docs <Name> returns intent, composition, state→token mappings and anti-patterns — tell your agent to run it instead of guessing a prop. The CLI also runs as an MCP server (brand-ui mcp).

Full guide

Tailwind and Next.js wiring, per-package extras, agent enablement and a prompt for migrating an existing project: docs/CONSUMING.md.

License

MIT

Status — registered, deliberately empty

This package is scaffolded and fully registered, but ships no components yet (issue #114). The barrel is empty on purpose:

• #116 moves Terminal and InteractiveTerminal here from @elabs-ai/components-ai, together with the optional @xterm/* peers and the ansi-to-react dependency.
• #117 adds the coding-agent CLI look-alikes, which is also when the ANSI token group from #115 is consumed.

Until #116 lands there is nothing to import, so the package is not yet wired into fixtures/consumer-smoke.

Where it sits in the dependency graph

@elabs-ai/components-terminal is a layer-2 leaf: tokens → ui/icons → terminal. It may depend on @elabs-ai/components-tokens, -icons and -ui, and nothing may depend on it. In particular @elabs-ai/components-ai must never import it — that is a sideways edge and pnpm check --rule dep-direction fails on it. A chat transcript that wants to show a terminal receives one as children.

A terminal emulator's optional peers exist to reproduce a shell, not to render a UIMessage; keeping them out of @elabs-ai/components-ai is what keeps that package cheap to install. See docs/decisions/2026-09-01-brainless-adoption-architecture.md § 1.