Command Palette

Search for a command to run...

Command Palette

Search for a command to run...

Components
Next

Copy Button

Copy text to clipboard with visual feedback and animation.

Loading…
import { CopyButton } from "@/components/copy-button"
 
export default function CopyButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <CopyButton variant="secondary" text="Text 1" />
 
      <CopyButton
        className="pr-3 pl-2.5 will-change-transform"
        variant="outline"
        size="default"
        text="Text 2"
      >
        Copy
      </CopyButton>
    </div>
  )
}

Features

  • Smooth icon transitions with animated state changes using Motion.
  • Visual feedback with three distinct states: idle, success, and error.
  • Accepts a string or function for dynamic content.
  • Callback support for success and error events.

Installation

Add the registry

Skip if already installed

$ pnpm dlx shadcn@latest registry add @carlos-dubon=https://carlosdubon.dev/r/{name}.json

Add the component

$ pnpm dlx shadcn@latest add @carlos-dubon/copy-button

Usage

import { CopyButton } from "@/components/copy-button"
<CopyButton text="Some text to copy" />

API Reference

CopyButton

Extends Button with clipboard functionality.

Prop

Type

See shadcn/ui documentation for more information.