Terminal windowPro

A terminal window with one chrome surface for the title bar and process tabs, a true mono character grid and a cursor. Pairs with the free Terminal.

Markdown

On this page

ProThe free Terminal in a dark window with process tabs: a test run fails, the agent patches it, it passes.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/terminal-window

Usage

tsx

import { TerminalWindow } from "@/components/ui/chatcn/pro/terminal-window"
import { Terminal } from "@/components/ui/chatcn/terminal"

<TerminalWindow title="~/code/checkout" tone="dark" contentClassName="p-0">
  <Terminal hideHeader text={output} running />
</TerminalWindow>

Examples

States

ProFollowing the page theme, a failed tab, glyph controls and a long title.

Props

Prop	Type	Notes
`title`	`ReactNode`	Centered, truncated
`tabs`	`{ id, title, running?, failed? }[]`	Shown with two or more
`activeTab`, `defaultActiveTab`, `onActiveTabChange`		Controlled or uncontrolled
`tone`	`"auto" \| "dark"`	Dark keeps it dark on a light page
`controls`	`"dots" \| "glyphs" \| "none"`	Default dots, gray
`height`, `width`	`number \| string`	Content height, default 360

TerminalCursor

Put <TerminalCursor /> at the end of a prompt line. It is one character cell wide and one line tall, shape is block, bar or underline, and it blinks unless blink={false}. The content area sets 13 px cells on 20 px lines with ligatures off, so output columns line up. ANSI colors come from the free Terminal, mapped onto the kit hues.

Keyboard

Key	Action
`ArrowLeft`, `ArrowRight`	Move between tabs
`Tab`	Into the content

Accessibility

Tabs are a Base UI tablist. A failed tab shows a red cross and says failed in its accessible name.
A running tab shows a spinner ring; the free Terminal inside announces completion, not every line.

Motion

The running ring spins and stops under reduced motion. Tabs change color only.
The cursor blinks with a stepped 1.2 s cycle and holds steady under reduced motion.