Terminal

Install

pnpm dlx shadcn@latest add @vegastack/terminal

Usage

import { Terminal } from "@/components/ui/terminal";

<Terminal
  title="Install"
  lines={[
    "pnpm dlx shadcn@latest add @vegastack/button",
    { output: "✓ Installed 1 component" },
  ]}
/>;

Terminal self-scopes to the marketing dark ground (.vs-marketing) — it reads correctly even embedded in a light-theme docs page (like this one), with no MarketingSurface wrapper required.

Anatomy

Terminal is a compound component. Every exported part, with the data-slot it renders (generated from the canonical source):

Examples

Multi-line, custom prompt

Each line is a plain string (a command) or { output: string } (dimmed, no prompt glyph). The prompt glyph — the sanctioned "terminal prompt glyph" --brand marker role — defaults to $ and is overridable.

Copying

The command row composes the icon-only CopyButton at its inline end. The command pane scrolls independently, so the action remains visible even when a command is long. It copies every command line (not output lines), joined by newline, unless you pass an explicit copyValue; successful writes swap the copy icon for the standard success check.

API Reference

Accessibility

• The prompt glyph is decorative (aria-hidden) — command text itself is real, readable text.
• The composed CopyButton carries its own accessible name ("Copy command" / "Copied command") and announces the copy via a visually-hidden live region.
• The command pane is keyboard-focusable while it actually scrolls, and not otherwise. A scrollable region that cannot be focused is unreachable without a pointer; a pane whose commands fit needs no tab stop, and adding one would put a dead stop in front of every keyboard user on a page full of one-line install snippets. The pane measures itself live (useOverflow), so the tab stop appears and disappears with the viewport width. Focus is shown as an inset outline: an outward one is not painted at all here, because the block's root is overflow-hidden and scroll-fade-x masks the pane to its own border box. A border tint is not an option either — forced-colors: active replaces border-color, which would leave the pane with no indicator in the forced palette.
• The pane is always announced as a named group, labelled by the visible title — the name and the role do not move with the measurement, because a role that appeared and vanished under a screen reader as the window resized would be a worse defect than the tab stop it removed — so title="Install" reads as "Install, group". A bare focusable div would announce as an unnamed stop: it maps to the generic role, which prohibits naming, so an aria-label on it is not reliably exposed. group is deliberate rather than region, which is a landmark — several install snippets on one page should not add several landmarks. Override the name with aria-label or point aria-labelledby at your own element; both are applied to the pane, not the outer block.
• Content is fully caller-supplied — no timestamps, no randomness — so the block is deterministic and safe for visual capture.

Do / Don't