Terminal Frame

For install steps, CLI products and developer docs: the commands type themselves once seen, the output follows, and Copy takes the commands only.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add terminal-frame

Usage

Example

import { TerminalFrame } from "@/components/galactrex/terminal-frame";

<TerminalFrame lines={[
  { kind: "input", text: "npx @galactrex/ui add border-beam" },
  { kind: "output", text: "✔ Done." },
]} />

Source

Installs to components/galactrex/terminal-frame.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`lines`	`{ kind: "input" \| "output"; text: string }[]`	—	The session, in order.
`title`	`ReactNode`	`"terminal"`	Window title.
`prompt`	`string`	`"$"`	Prompt before input lines.
`speed`	`number`	`38`	Characters typed per second.
`pause`	`number`	`280`	Ms after each line.
`start`	`"inView" \| "mount"`	`"inView"`	When typing starts.
`copyable`	`boolean`	`true`	Show a Copy button for the commands.
`className`	`string`	—	Extra classes for the outer element.

Variants

Install. One command, one line of output.
Session. Several commands with output between them.

Accessibility

The whole transcript is in the document as text from the start; the typing is aria-hidden.
Copy and Replay are real buttons with visible focus.

Motion and reduced motion

Typing writes text only; no layout animation.
Reduced motion: the full transcript shows at once and Replay is hidden.