copy-button - examples

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Phone22remthe floor, the narrowest this promises to work at

tanstacktanstack add https://adamjurek.com/r/tanstack/copy-button.json

shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/copy-button.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { CopyButton } from "@sushindustries/ui";

export function ApiKeyRow({ value }: { value: string }) {
	return (
		<div className="flex items-center justify-between gap-3">
			<code className="mono text-sm">{value.slice(0, 8)}…</code>
			<CopyButton text={value} label="Copy key" ground="paper" />
		</div>
	);
}

tsx

What this example is not

Not a masked-value component. The truncated display is for reading; the full value still goes to the clipboard on click, which is the point - do not reuse this pattern somewhere the truncated text is the only thing that should ever leave the row.