# Util Copy Block

Showing a package installation snippet with npm, pnpm and yarn tabs.

- id: `util-copy-block`
- Page: https://agentic-ui-kit.com/components/util-copy-block
- Live preview: https://agentic-ui-kit.com/live/component/util-copy-block

## Install

```bash
agentic-ui add util-copy-block
npx shadcn@4.17.0 add @agentic-ui/util-copy-block
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** file-language-tabs, syntax-highlighting, copy-to-clipboard, copy-success-feedback, copy-failure-feedback, line-numbers, long-line-horizontal-scroll, line-wrapping-toggle, markup-escaping, keyboard-tab-switching, empty-state, responsive-header
- **Intents:** explore-detail, import-export, communicate
- **Suits domains:** devtools, ai-workspace, knowledge, saas, operations, settings
- **Interaction:** tab-switch, keyboard-arrow-tab-switch, copy-click, horizontal-scroll, line-wrap-toggle, line-number-toggle
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** showing a package installation snippet with npm, pnpm and yarn tabs, documenting an API response with the request and the JSON payload in tabs, delivering the code block of an assistant response for the user to copy, exposing a theme configuration snippet on a developer settings page
- **Avoid when:** code editing with autocomplete, diagnostics and saving, side-by-side comparison of two versions, which corresponds to a diff viewer
- **Preserve when adapting:** tab-to-content-and-clipboard-consistency, markup-escaping-by-construction, copy-feedback-and-live-region, accessible-tab-semantics
- **Replace when adapting:** fixture-snippets, language-token-palette, clipboard-transport, filename-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** tabs, button, badge, scroll-area, separator
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives