Terminal

Terminal window. Snippet mode types install commands once scrolled into view, with the full transcript kept in the DOM for SEO and no-JS; log mode streams lines into a live region that follows the bottom unless you scroll up, then offers a jump back. Status lines carry glyphs, copy grabs the commands.

npx @kznlabs/labsui add terminal

zsh — clips

clipper.log

12:04:00Clipper#4021 connected to 12 servers

import { Terminal } from "@/components/ui/terminal";// Server-safe props: the lines are plain data. Copy grabs just the commands.export function Install() {  return (    <Terminal      typing      lines={[        { kind: "command", text: "bun add motion lucide-react" },        { kind: "success", text: "2 packages installed [612ms]" },      ]}    />  );}

"use client";import { useEffect, useState } from "react";import { type TerminalLine, Terminal } from "@/components/ui/terminal";export function BotLog({ url }: { url: string }) {  const [lines, setLines] = useState<TerminalLine[]>([]);  useEffect(() => {    const source = new EventSource(url);    source.onmessage = (e) =>      setLines((ls) => [...ls, JSON.parse(e.data)].slice(-500));    return () => source.close();  }, [url]);  return (    <Terminal      title="bot.log"      log      lines={lines}      copyText={false}      bodyClassName="h-80"    />  );}

<Terminal>

Terminal window. Snippet mode types install commands once in view (full text stays in the DOM for SEO and no-JS); log mode streams lines and follows the bottom unless you scroll up, offering a jump back when new output arrives.

lines*
TerminalLine[]
Lines in order; append to stream a log.
bodyClassName
string
Size the scrolling body, e.g. "h-64".
copyText
string | false
What Copy puts on the clipboard; defaults to the commands. false hides it.
logdefault false
boolean
Live log: role="log", sticks to the bottom unless you scroll up to read.
promptdefault "$"
string
Symbol before commands.
speeddefault 35
number
Ms per typed character.
titledefault "Terminal"
string
Window title.
typingdefault false
boolean
Types the commands and reveals the output once in view (install snippets).

Prop	Type	Default
`lines*` Lines in order; append to stream a `log`.	`TerminalLine[]`	—
`bodyClassName` Size the scrolling body, e.g. "h-64".	`string`	—
`copyText` What Copy puts on the clipboard; defaults to the commands. `false` hides it.	`string \| false`	—
`log` Live log: role="log", sticks to the bottom unless you scroll up to read.	`boolean`	`false`
`prompt` Symbol before commands.	`string`	`"$"`
`speed` Ms per typed character.	`number`	`35`
`title` Window title.	`string`	`"Terminal"`
`typing` Types the commands and reveals the output once in view (install snippets).	`boolean`	`false`

type TerminalLine: { id?: string | number; kind?: Kind; text: string; time?: string; }

* required. Every component also takes className.