AgentsAnimated
Terminal
Streaming command output in a dark console.
Terminal shows commands an agent runs and their output: always a dark console so it reads the same in both themes, prompts in signal, success and failure lines colored, new lines sliding in while it streams, and auto-scroll.
Preview
agent · shell
$ pnpm test billing
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/terminal.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/terminal.
Builds on: motion
Usage
import { Terminal } from "@/components/ui/terminal";
<Terminal lines={output} streaming={running} />Motion
How it moves
New lines slide in; a caret blinks while running.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Terminal
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | string[] | — | Output lines. |
| title | string | — | Title bar. |
| streaming | boolean | — | Live caret. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: terminal component react · command output ui · ai agent terminal · streaming logs react · console log viewer