Overview

A terminal-style output display component with ANSI color parsing, auto-scroll, and controls for copying and clearing output. Perfect for displaying command-line results, logs, or build output.

Installation

bunx shadcn@latest add @elements/cli-output

Usage

import { CliOutput } from "@/components/elements/devtools/cli-output";

const output = [
  "Installing dependencies...",
  "\x1b[32m✓\x1b[0m @clerk/nextjs installed",
  "\x1b[32m✓\x1b[0m tailwindcss installed",
  "\x1b[33mwarning\x1b[0m peer dependency missing",
  "\x1b[32mDone in 2.3s\x1b[0m"
];

export function TerminalOutput() {
  return (
    <CliOutput
      output={output}
      prompt="$"
      autoScroll
      showControls
    />
  );
}

Props

ANSI Colors

Supports standard ANSI color codes:

• Text colors: 30-37, 90-97
• Background colors: 40-47
• Styles: bold, dim, italic, underline, strikethrough

Features

• ANSI escape code parsing
• Auto-scroll to latest output
• Copy all output to clipboard
• Clear output button
• Optional timestamps
• macOS-style window controls