Terminal

Console output with ANSI colour. Follow-tail sticks to the bottom only while the reader is already there, so scrolling up to read something is never undone by the next line.

src/components/ui/terminal.tsx

About

From the component's own source, where it was written.

Console output with ANSI colour, for build and deploy logs.

The parser handles SGR sequences only — colour, bold, dim, reset. Cursor movement and screen clearing are dropped rather than half-implemented: honouring them means maintaining a screen buffer, and a log pane is an append-only transcript, not a terminal emulator.

The surface follows the theme rather than being a fixed black panel: a white-on-black block in the middle of a light page reads as a screenshot pasted into the document. The ANSI palette maps onto theme tokens, so the same output stays legible either way.

Follow-tail sticks to the bottom only while the reader is already there. Scrolling up to read something and being yanked back down by the next line is the single worst thing a log viewer can do.

Install

npx astralyx-ui add terminal

Usage

import { Terminal } from '@/components/ui/terminal'

<Terminal title="npm run build" content={output} follow showLineNumbers />

Composer

Change the props and the source below follows.

npm run build

$ npm run build

vite v8.0.1 building for production...

✓ 214 modules transformed

dist/assets/index-4f2a1c9.css 92.4 kB

dist/assets/index-4f2a1c9.js 748.1 kB

✓ built in 1.86s

error chunk size limit exceeded

Props

showLineNumberscopyable

title

tsx

<Terminal
  title="npm run build"
  content={output}
  showLineNumbers={false}
  copyable={true}
/>

Examples

Build output

tsx

<Terminal title="npm run build" content={output} showLineNumbers />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Terminal`

Extends Omit<ComponentProps<'div'>, 'content' | 'title'>.

Prop	Type	Default	Description
content	string	—	Raw output split on newlines, or the lines directly when you already have them.
lines	string[]	—	Raw output split on newlines, or the lines directly when you already have them.
follow	boolean	false	Stick to the bottom as output grows — but only while the reader is within a couple of dozen pixels of it.
showLineNumbers	boolean	false	Gutter numbering.
copyable	boolean	true	Header row with a copy button that reports back for a moment after copying.
title	string	—	Header row with a copy button that reports back for a moment after copying.

Functions

Function	Signature	Description
parseAnsi	(line: string) => Span[]	Split one line into styled spans at its SGR escapes.

Behaviour

Topic	Detail	Description
ANSI support	SGR only	Colour, bold, dim and reset. Cursor movement and screen clearing are dropped rather than half-implemented — honouring them needs a screen buffer, and this is an append-only transcript.