Copy Button
@sushindustries/uiA glass chip that writes to the clipboard and confirms in the button itself.
Copy, with the confirmation where the click happened. The chip swaps to a tick and "Copied" for two seconds, then hands back - no toast, no portal, nothing that has to know where the corner of the screen is.
tanstacktanstack add https://adamjurek.com/r/tanstack/copy-button.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/copy-button.jsonWhy it is built this way
A toast library for one word is the wrong trade, but a setState after
unmount is still a leak, so the reset timer is cleared on unmount. The chip is
glass - fill plus edge, no blur - and it comes in two grounds: slab for the
charcoal of a code block, paper for everywhere else, because one glass recipe
cannot sit on both materials.
On fine pointers the chip appears on hover of its code-shell; on coarse
pointers it is always visible, because "appears on hover" is a desktop fiction
a phone cannot perform.
What it does not do
It does not fall back to document.execCommand. navigator.clipboard exists
everywhere this site runs; where a permission denies it, the button simply
never confirms, which is the truthful rendering of what happened.
Install commands are not written here
Anything in packages/ui/registry.ts gets its TanStack and shadcn commands
attached automatically, so there is nothing to keep in sync.
Install
tanstack add https://adamjurek.com/r/tanstack/copy-button.jsonpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/copy-button.jsonpnpm add @sushindustries/ui @sushindustries/atomsWhat you get
| Version | 0.1.0 |
| Category | content · Rendering |
| Files | copy-button.tsx |
| Dependencies | None |
| Also installs | iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content |
| Tags | clipboard, button |
No runtime dependencies
It brings nothing with it beyond the stylesheet.