Terminal

Renders streamed console output with incremental ANSI attributes and optional original colors.

Preview

Composer testsOutput complete
$ pnpm test
Running composer tests
PASS sends a complete prompt
PASS retains the draft on failure

2 tests passed in 428 ms

In action

Follow recorded console output

Recorded composer checksOutput complete
$ pnpm test
Running composer tests
PASS sends a complete prompt
PASS retains the draft on failure

2 tests passed in 428 ms

When to use

Use it for

  • Pass the growing output string to retain partial terminal escape sequences across updates.
  • The monochrome default preserves bold, italic, underline, strike and inverse states. Set ansiColors to display supplied 16-color, 256-color and truecolor values.
  • Provide onClear to request clearing application state. Copy preserves the complete original output, including escape sequences.
  • maxCharacters bounds visible source; maxHeight creates a named keyboard-scrollable region.

Avoid

  • Treating this output viewer as a shell, process runner or cursor-addressable terminal emulator.
  • Assuming output text can execute OSC clipboard commands or turn itself into active links. Such sequences are discarded.
  • Forcing follow-scroll while a reader is inspecting earlier output.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { Terminal } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/terminal.

Copy the source

npx @noorddev/vlak-cli add terminal

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/terminal.json

Installs the same source through the shadcn CLI.

React

import { Terminal } from "@noorddev/vlak-react";

<Terminal output={"\u001b[1m2 tests passed\u001b[0m\n"} streaming={false} />

See the integration example to compose these components with your application's model and data.

Props

Terminal

Streaming console output with incremental ANSI attributes; not a shell or terminal emulator.

PropTypeDefaultDescription
outputrequiredstring
titleReactNode"Terminal"
streamingbooleanfalse
autoScrollbooleantrue
ansiColorsbooleanfalseExplicitly opt into original ANSI colors. The default retains text attributes in monochrome.
onClear() => void
onCopy(output: string) => void | Promise<void>
maxHeightProperty.MaxHeight<string | number>"24rem"
maxCharactersnumber100000Maximum visible source characters. Copy retains the complete original output.

Also accepts Omit<HTMLAttributes<HTMLElement>, "onCopy" | "title">.

The ref reaches HTMLElement.

Keyboard

KeysDoes
TabTab reaches copy, optional clear, jump-to-latest and the output region.
Enter, SpaceEnter or Space activates the focused button. Scroll keys move the focused output region.

Accessibility

  • Only the short streaming status is live; token output remains ordinary readable text.
  • Reader scroll position is preserved until they return to the end or activate Latest output.
  • The cursor is decorative and stops animating with reduced motion.
  • Original terminal colors are explicit opt-in and revert to system colors in forced-colors mode. Text remains escaped React content.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<section class="rs-terminal" aria-label="Terminal"><header class="rs-terminal-header"><span class="rs-terminal-title">Terminal</span><span class="rs-terminal-status" role="status">Output complete</span></header><div class="rs-terminal-content" tabindex="0" role="group" aria-label="Terminal output"><pre class="rs-terminal-pre"><span class="rs-terminal-run rs-terminal-bold">2 tests passed</span></pre></div></section>

Classes

.rs-terminal.rs-terminal-header.rs-terminal-title.rs-terminal-status.rs-terminal-content.rs-terminal-pre.rs-terminal-cursor.rs-terminal-footer.rs-terminal-run.rs-terminal-bold.rs-terminal-dim.rs-terminal-italic.rs-terminal-underline.rs-terminal-strike.rs-terminal-underline-strike.rs-terminal-inverse.rs-terminal-colors

Depends on

ButtonSnippet

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas