#Snippet

Places one reusable short command or identifier beside its copy action in a boundary that scans well and survives narrow screens.

npm install @a3s-lab/ui@0.4.1

<div class="snippet">
  <code>npm install @a3s-lab/ui@0.4.1</code><button type="button" class="btn copy-button" data-size="sm" data-copy-text="npm install @a3s-lab/ui@0.4.1"><span data-copy-label>Copy</span><span data-copy-feedback aria-live="polite"></span></button>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<div class="snippet">
  <code>npm install @a3s-lab/ui@0.4.1</code><button type="button" class="btn copy-button" data-size="sm" data-copy-text="npm install @a3s-lab/ui@0.4.1"><span data-copy-label>Copy</span><span data-copy-feedback aria-live="polite"></span></button>
</div>

#Contract

#Product boundary

Snippet does not own multiline highlighting, execution, or download. Use Highlighter for long code, Code Diff for changes, and the host for execution.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

Code stays left-to-right and horizontally scrollable. The copy action has a clear name and result feedback so keyboard users need not select text manually.