Preview Updated 2026-05-10

AnsiText

Parses ANSI escape sequences (\x1b[...m) and renders them as colored spans — display-only, no xterm.js dependency.

Basic usage

Supports the basic 16 colors (foreground + background) plus the 8 bright colors and modifiers (bold / dim / italic / underline / inverse). Colors map to design tokens and follow the active theme; 24-bit truecolor escapes are not parsed.

✓ build succeeded in 1.2s
⚠  warning: 3 unused exports
✗ test failed

  expected:  foo 
  received:  bar

<CfAnsiText :text="terminalOutput" />

<CfAnsiText text={terminalOutput} />

Three sizes

sm / md / lg adjusts font size and line height — sm for compact toast logs, lg for terminal panels.

✓ test passed
  duration: 12ms
  expected:  foo 
  actual  :  bar

✓ test passed
  duration: 12ms
  expected:  foo 
  actual  :  bar

✓ test passed
  duration: 12ms
  expected:  foo 
  actual  :  bar

<CfAnsiText :text="log" size="sm" />
<CfAnsiText :text="log" size="lg" />

<CfAnsiText text={log} size="sm" />
<CfAnsiText text={log} size="lg" />

API

Prop	Type	Default	Description
`text`	`string`	—	String containing ANSI escapes
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`wrap`	`boolean`	`true`	Soft line wrapping
`preserveWhitespace`	`boolean`	`true`	`<pre>` behavior

Supported SGR codes: 0 1 2 3 4 7 22 23 24 27 30-37 39 40-47 49 90-97 100-107.