Terminal

<Terminal>TailwindCSS Modules

Visual terminal sessions for docs and marketing — prompts, commands, output, status, and a blinking cursor. Display-only; never executes shell commands.

InstallationColoxo CLI

npx coloxo add terminal --style coloxo-css

ES Module ImportPlayground / npm package

import { Terminal } from '@coloxo/ui';

Design Tokens:

--cx-terminal-bg--cx-terminal-prompt--cx-terminal-success--cx-radius-lg: 12px

1. Install & usage

Copy the commands below. The Terminal copy button copies commands only — never prompts or chrome.

Package + CLI

bash

$pnpm add @coloxo/ui$npx coloxo add terminal

npm / pnpm / yarn

npm

bash

$npm install @coloxo/ui$npx coloxo add terminal

pnpm

bash

$pnpm add @coloxo/ui$pnpm dlx coloxo add terminal

yarn

bash

$yarn add @coloxo/ui$yarn dlx coloxo add terminal

Import

TypeScript

import { Terminal } from "@coloxo/ui";

2. Variant matrix

Chrome levels from full window to inline command snippets.

Variant	Preview
default	bash npx coloxo add button
minimal	npx coloxo add button
window	bash npx coloxo add button
inline	npx coloxo add button

3. Features

Structured commands, status output, shells, and paths — without becoming a real shell.

Dev session

zsh

~/projects/coloxo%pnpm installPackages: +42%pnpm dev✓ Local:   http://localhost:3000Ready in 1.2s

Status output

bash

$npm run build✓ Build completed successfully.$npm run test✕ 3 tests failed.$npm audit⚠ 1 moderate vulnerability

Shells

bash

$ls -la

zsh

%ls -la

PowerShell

PS C:\\Projects\\coloxo>pnpm add @coloxo/ui

Command-only (docs install)

bash

$npx coloxo add button

4. Interactive props configurator

Shell

Variant

Status

Working directory

Copy button

Cursor

Cursor blink

Visual Render CanvasSHELL: BASH | VARIANT: DEFAULT | STATUS: DEFAULT

bash

~/projects/coloxo$pnpm add @coloxo/ui$npx coloxo add terminal$█

tsx

1<Terminal2  shell="bash"3  cwd="~/projects/coloxo"4  showCopyButton5  commands={[6    { command: "pnpm add @coloxo/ui" },7    { command: "npx coloxo add terminal" },8  ]}9/>

5. Themes

Dark by default. Force light, or follow the app with theme="system".

bash

$npx coloxo add terminal

bash

$npx coloxo add terminal

zsh

~/projects/coloxo%pnpm installPackages: +42%pnpm dev✓ Local:   http://localhost:3000Ready in 1.2s

6. Accessibility

Copy

Native button with aria-label. Status announced via aria-live polite region.

Clipboard payload

Only command text is copied — prompts, dots, and cursor are excluded.

Motion

Cursor blink respects prefers-reduced-motion.

Selection

Code is selectable by default; disable with selectable={false}.

7. Props

Name	Type	Default	Description
commands	TerminalCommand[]	—	Structured session: { command, output?, status? }.
content	string	—	Raw terminal body when not using commands.
shell	"bash" \| "zsh" \| "powershell" \| "cmd" \| "fish" \| "sh" \| "terminal"	bash	Shell identity for prompt defaults and header label.
shellLabel	string	—	Override header shell label.
title	string	—	Optional header title.
cwd	string	—	Working directory line (or baked into PowerShell/cmd prompt).
variant	"default" \| "minimal" \| "window" \| "inline"	default	Chrome level.
theme	"light" \| "dark" \| "system"	dark	Forced or system theme (dark default).
showWindowControls	boolean	true	Traffic-light dots.
showShell	boolean	true	Shell label in header.
showPrompt	boolean	true	Prompt before each command.
prompt	string	—	Override prompt string.
showCursor	boolean	true	Trailing idle cursor.
cursor	"block" \| "line" \| "underline"	block	Cursor shape.
cursorBlink	boolean	true	Animate cursor (honors reduced motion).
showCopyButton	boolean	false	Copy commands only (no prompts).
maxHeight	number \| string	—	Scrollable body height.
scrollable	boolean	true	Allow body scrolling.
selectable	boolean	true	Allow text selection.
padding	"sm" \| "md" \| "lg"	md	Body padding.
fontSize	"sm" \| "md" \| "lg"	md	Monospace size.