Copy button

Copy a value with immediate confirmation.

npx shadcn@latest add @silicon-ui/copy-button
actionutility
Loading…

Installation

With the shadcn CLI

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

Manually

  1. Install the dependencies.

    npm install lucide-react motion
  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/copy-button/copy-button.tsx
    • components/silicon-ui/copy-button/copy-button.module.css
    • components/silicon-ui/lib/use-copy-feedback.ts shared
  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { CopyButton } from "@/components/silicon-ui/copy-button/copy-button";

API reference

PropTypeDefault
value*string—
labelstring"Copy"
classNamestring—
iconOnlybooleanfalse
variant"outline" | "plain""outline"
disabledboolean—
onCopied() => void—

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens