CopyToClipboard Component — Astro
Reusable component for copying text values to the clipboard with visual feedback
CopyToClipboard Component
A reusable component for copying text values to the clipboard with visual feedback.
Add this component
The command below includes <strong>Copy to Clipboard</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npm pnpm yarn bun
npm 
pnpm 
yarn 
bun Live Example
Click the button below to copy text:
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React
Props
value(string, required) - The text value to copyid(string, optional) - Unique ID for the button. If not provided, a random ID will be generatedlabel(string, optional) - ARIA label for the buttonformat(string, optional) - Format name shown in feedback messageclass(string, optional) - Additional CSS classes
Features
- Visual feedback with icon change (copy → checkmark)
- Accessible with ARIA labels and keyboard support
- Fallback for older browsers (document.execCommand)
- Theme-aware styling
- Auto-reset after 2 seconds