Snippet

Snippet shows a short command in a read-only field with a copy button. Agents answer with commands all the time, and this keeps them easy to copy. The package manager tabs let the reader switch between bun, npm, pnpm and yarn.

Installation

Snippet is built with the Input Group and Tabs components.

Usage

The command is a computed of the chosen package manager. The copy button swaps its icon to a check for two seconds and announces "Copied" in a polite live region.

• Use readonly, not disabled, so the text can still be selected.
• Keep the font-mono class on the input so the characters line up.
• For output with more than one line, use a Code Block instead.

Accessibility

• The field has an aria-label, and the copy button changes its label when it copies.
• Copying is announced through an aria-live="polite" region.