ANSI output

Terminal output with ANSI colors mapped onto the kit palette for both themes, carriage-return progress bars collapsed and incremental parsing for streams.

Markdown

On this page

A Vitest run streams in, fails and keeps red only for the failure.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/ansi-output.json

Usage

tsx

import { AnsiOutput } from "@/components/ui/chatcn/ansi-output"

<AnsiOutput
  command="pnpm vitest run"
  text={stdout}
  streaming={running}
  exitCode={exitCode}
  durationMs={durationMs}
/>

Pass the whole output so far as text. When new text extends the old, only the new part is parsed, and finished lines are frozen objects that never re-render. The parser is also available on its own as AnsiParser, parseAnsi and stripAnsi from @/lib/chatcn-ansi.

Examples

Build, progress bar and waiting

Bold, dim, italic, underline and inverse carry through. Colors map onto six kit hues tuned for light and dark (red, green, amber for yellow, blue, purple for magenta, teal for cyan), and 256-color and truecolor values snap to the nearest one. Grays go by lightness, and colored backgrounds become soft tints. Carriage returns rewind the line, so a progress bar shows only its latest frame.

A finished build, a self-redrawing progress bar and a process waiting for output.

Color mapping

ANSI	Shows as
Red, bright red, 256 and truecolor reds	`text-chatcn-red`
Yellow, bright white	Default text at 500 weight
Green, white	Default text
Blue, magenta, cyan	`text-chatcn-fg-muted`
Black, gray (90), dim	`text-chatcn-fg-subtle`
Any background	A subtle fill, or red for red backgrounds
OSC 8 links	Underlined links that open in a new tab

Props

Prop	Type	Notes
`text`	`string`	Raw output with escape codes
`command`	`string`	Shown in the header after `$`
`streaming`	`boolean`	Spinner, Running, and stick-to-bottom
`exitCode`	`number \| null`	Non-zero shows as a failure in red
`durationMs`	`number`	Shown after the exit code
`wrap`	`boolean`	Wrap long lines. Off by default, like a terminal
`maxHeight`	`number \| string`	Default 320
`maxLines`	`number`	Lines rendered before Show full output. Default 500
`hideHeader`	`boolean`

Keyboard

Key	Action
`Tab`	Copy, then the output region
`Up`, `Down`, `Page Up`, `Page Down`	Scroll the focused output. Scrolling up stops following new lines

Accessibility

The output is a focusable, labelled region, so keyboard users can scroll it.
Lines are not announced as they stream. A polite live region says when the command finishes or fails.
A failed exit pairs red with an icon and the exit code.

Motion

While streaming, the view sticks to the bottom only while you are there. Any upward scroll lets go at once and never fights you.
Latest output fades in with a 4 px rise over 150 ms when you have scrolled away. Under reduced motion it only fades.