Docs
Copy Button

Copy Button

A button component that copies content to clipboard with visual feedback.

The CopyButton component provides a simple way to copy text to the clipboard with visual feedback using a check mark animation when successful.

Installation

npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/copy-button.json

Usage

import { CopyButton } from "@/components/ui/copy-button"
 
export function Demo() {
  return (
    <CopyButton
      content="Text to be copied"
      copyMessage="Copied to clipboard!"
    />
  )
}

Props

PropTypeDescription
contentstringThe text content to be copied to clipboard
copyMessage?stringOptional custom message to show when content is copied

Examples

Basic Usage

With Custom Success Message

Within a Code Block

console.log("Hello World")
Typing IndicatorFile Preview