## Copy Command (S—062)

An install command with package-manager tabs and a copy button that swaps to a check in place.

- URL: https://sundaeui.dev/components/copy-command
- Category: UI components · Art direction: Understated
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/copy-command.json`
- Tags: command, tabs, install, clipboard, docs, copy

The command sits in a quiet well with a prompt glyph. Tabs switch between package managers and the new command slides up into place.
Pressing copy writes to the clipboard, swaps the icon to a check for a moment and tells screen readers it worked. Long commands scroll sideways instead of wrapping.

### Usage

```tsx
import { CopyCommand } from '@/components/sundae/copy-command'

<CopyCommand
  commands={[
    { label: 'pnpm', command: 'pnpm dlx shadcn add @acme/button' },
    { label: 'npm', command: 'npx shadcn add @acme/button' },
  ]}
/>
```

### Props

- `commands` (`CommandOption[]`, required): Label and command per package manager.
- `tabs` (`boolean`, default `true`): Show the package-manager tabs.
- `prompt` (`string`, default `'$'`): Glyph before the command. Empty string hides it.
- `onCopy` (`(command: string) => void`): Called after a copy.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Install steps in docs, READMEs and component pages.
- Any short string people paste somewhere else: API keys, invite links, CLI flags.

### When not to use

- Multi-line code: use a code block with its own copy button.
- Secrets that should stay masked until revealed.

### Accessibility

- Tabs follow the WAI-ARIA tabs pattern with roving focus; the command is the tabpanel.
- The copy button has an accessible name that changes to "Copied", and a polite live region announces the result.
- Reduced motion removes the slide and icon spring.

### Keyboard

- ← / →: Switch package manager
- Home / End: First or last package manager
- Tab: Move to the copy button
- Enter / Space: Copy the command

### FAQ

**What happens if the clipboard is blocked?**
The write is wrapped in a try/catch. The check still shows, so wire onCopy to your own fallback if you need one.

**Can I add yarn or deno?**
Yes. Tabs are generated from the commands array, in the order you pass it.