NK

Search

Search pages, posts, and components

All components

Copy Button

Buttons

Copies a value and confirms with an icon swap.

Installation

Add it with the shadcn CLI:

$pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/copy-button.json
Or install manually
  1. 1. Install dependencies

    pnpm add motion clsx tailwind-merge lucide-react
  2. 2. Copy the component source into components/library/copy-button.tsx

Props

PropTypeDefaultDescription
valuestring - Text to copy.
classNamestring - Classes applied to the button.

Accessibility

  • aria-label switches between “Copy” and “Copied” to announce the result.
  • Fails silently when the clipboard API is unavailable.

Dependencies

motionclsxtailwind-mergelucide-react