How does Terminal Command copy multiple commands?

It joins the required lines array with newline characters and passes that string to navigator.clipboard.writeText. A successful copy shows Copied for 1.8 seconds; a failed copy leaves the state as Copy.

What are the Terminal Command props and defaults?

lines is a required readonly string array. shell is optional and defaults to zsh; className is optional and defaults to an empty string.

Is the Copied status announced to screen readers?

The button's aria-label remains Copy commands, and the visual Copy or Copied status is not an aria-live announcement in the current source.

Terminal Command

STARCK UI's Terminal Command is a shadcn-compatible React component that displays terminal command lines with a copy button. Pass the required lines array; it renders a shell label, a horizontally scrollable command region, and visual copy feedback.

Props and defaults

lines: readonly string[]: Required. Each string renders as one command, and copying joins the strings with newline characters.
shell?: string: Optional shell label. The default is zsh.
className?: string: Appended to the outer wrapper. The default is an empty string.

Copy and overflow behavior

The button calls navigator.clipboard.writeText(lines.join("\n")). Success changes the visible state from Copy to Copied for 1.8 seconds. If writing to the Clipboard API fails, the state remains Copy. The button's aria-label remains Copy commands in both visual states, and the current source does not add an aria-live announcement.

Command lines use whitespace-pre inside an overflow-x-auto region, so long lines stay on one line and scroll horizontally.

Updated October 8, 2026. The documentation preview and Usage output use the shared terminalCommandExample values: the zsh shell label and the same two command lines.

FAQ

How does Terminal Command copy multiple commands?: It joins the required lines array with newline characters and passes that string to navigator.clipboard.writeText. A successful copy shows Copied for 1.8 seconds; a failed copy leaves the state as Copy.
What are the Terminal Command props and defaults?: lines is a required readonly string array. shell is optional and defaults to zsh; className is optional and defaults to an empty string.
Is the Copied status announced to screen readers?: The button's aria-label remains Copy commands, and the visual Copy or Copied status is not an aria-live announcement in the current source.

Used in

SessionWatcher ↗

zsh

$ pnpm dlx shadcn@latest add @starck/terminal-command

$ pnpm dev

Install

Add the source directly to your shadcn project.

pnpm dlx shadcn@latest add @starck/terminal-command

Usage

<TerminalCommand
  shell="zsh"
  lines={[
    "pnpm dlx shadcn@latest add @starck/terminal-command",
    "pnpm dev",
  ]}
/>