A command chip that copies on click. A ghost of the text lifts off and flies into the clipboard icon, which gulps it, turns into a drawn check and sweeps a light across the chip.
Install the effect
One command adds the file to your project.
npx shadcn@latest add https://hyperblur.dev/r/micro-copy-chip.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-copy-chip.tsx.
import { MicroCopyChip } from "@/components/hyperblur/micro-copy-chip"
<MicroCopyChip value="npm i @northwind/sdk" />| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | "npx shadcn add hyperblur/aurora" | Text shown and copied. |
| prefix | string | "$" | Muted prefix shown before the value and not copied. Empty string hides it. |
| copiedLabel | string | "Copied" | Tag text after copying, also announced to screen readers. |
| timeout | number | 1800 | Milliseconds the copied state stays. |
| accent | string | "#2f7bff" | Ghost, icon and sweep color. |
| onCopy | (value: string) => void | Called after the value is written to the clipboard. | |
| className / style / ...rest | ButtonHTMLAttributes<HTMLButtonElement> | Forwarded to the chip button. |