Copy Button

A button component for copying text to the clipboard.

Default

Copy CTA for commands and snippets.

default-example.tsx

1"use client";
2
3import { CopyButton } from "@/registry/ui";
4
5export function CopyButtonDefaultExample() {
6  return (
7    <div className="flex justify-center">
8      <CopyButton value="npm install @acme/ui">Copy</CopyButton>
9    </div>
10  );
11}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/copy-button

Props

Name	Type	Default	Description
value	string	Required	The text to copy to the clipboard
children	React.ReactNode	Required	The content of the copy button
copiedText	string	Copied!	The text to show when the text is copied
copyLabel	string	Copy	The text to show when the text is not copied
copiedLabel	string	Copied	The text to show when the text is copied
timeoutMs	string	1500	The time to show the copied text
className	string		The class name of the copy button
variant	string	outline	The variant of the copy button
size	string	sm	The size of the copy button