Snippet

---
import Snippet from "@/components/ui/snippet/Snippet.astro";
---

<Snippet id="snippet-init" code="npx eris-ui@latest init" />

Installation

npx eris-ui@latest add snippet

pnpm dlx eris-ui@latest add snippet

bunx eris-ui@latest add snippet

yarn dlx eris-ui@latest add snippet

Usage

Pass one shell command as code. The copy button copies all of it, and its icon turns into a check mark for two seconds. The first word, such as npx or pnpm, takes one colour and the rest takes another.

Long commands

A command breaks onto more lines instead of scrolling sideways. The copy button stays beside the first line.

---
import Snippet from "@/components/ui/snippet/Snippet.astro";
---

<Snippet id="snippet-add" code="pnpm dlx eris-ui@latest add button dialog tabs snippet" class="max-w-sm" />

Labels

The button shows an icon, so its name comes from copyLabel and copiedLabel. Screen readers say copyLabel for the button and copiedLabel after a copy. Set both to translate the button.

<Snippet code="npx eris-ui@latest init" copyLabel="Kopieren" copiedLabel="Kopiert" />

Accessibility

• The copy button is a plain <button> named by copyLabel, so Enter and Space copy the command.
• After a copy, a live region tells screen readers the copied label, because focus does not move.
• The command stays left to right on a right-to-left page.

Props