Skip to content
Agentic UI Kit
Buy

Dev Terminal Output

Terminal output viewer that renders ANSI colors from a build or command log.

Full screen Try a theme

Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.

About this block

What it's for

  • Terminal output viewer that renders ANSI colors from a build or command log.
  • Streaming console for an AI agent's shell commands with copy, clear and auto scroll.
  • CI log pane with a jump to latest button when scrolled up.

For structured, filterable application logs, use Dev Log Tail.

Includes

  • Ansi color parsing
  • Streaming output
  • Carriage return progress
  • Auto scroll
  • Jump to latest
  • Copy plain text
  • Clear output
  • Scrollback cap

Works with

  • Radix UI and Base UI primitives (pick the one your project uses)
  • React 19 and Tailwind CSS 4 in Next.js (App Router), Vite, React Router or TanStack Start, installed with the agentic-ui or shadcn CLI
  • Your theme tokens, in light and dark mode

Install

Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.

Agentic UI CLI
agentic-ui add dev-terminal-output
Installs through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/dev-terminal-output

Used in

A standalone component: drop it into any screen.

Type
Block
Variants
Radix UI and Base UI
Themes
Light and dark
Widths
Preview it at desktop, tablet and mobile widths above.
Sample data
Ships with sample data in sample-output.ts; replace it with your own.