Copies a string to the clipboard. The icon morphs into a check and the label swaps from Copy to Copied, then reverts after 1.6 seconds.
npx shadcn@latest add button-copynpm i -g @hyperblur/mcpnpx shadcn@latest add https://hyperblur.dev/r/button-copy.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-copy.tsx.
import { ButtonCopy } from "@/components/hyperblur/button-copy"
<ButtonCopy value="npm install @hyperblur/mcp" />| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Copy" | Button label. |
| value | string | "npx shadcn@latest add https://hyperblur.dev/r/button-copy.json" | Text written to the clipboard. |
| copiedLabel | ReactNode | "Copied" | Label shown after a successful copy. |
| resetAfter | number | 1600 | Milliseconds before the button returns to its resting state. |
| onCopied | (value: string) => void | Called after the text was copied. | |
| variant | "outline" | "solid" | "ghost" | "outline" | Bordered, accent filled or borderless button. |
| accent | string | "#2f7bff" | Accent color used for the focus ring, highlights and the solid variant. |
| size | "sm" | "md" | "lg" | "md" | Font size and padding preset. |
| disabled | boolean | false | Disables the button and dims it. |