Copy Button

registry/examples/copy-button-demo.tsx

import { CopyButton } from "@/registry/ui/copy-button"

export default function CopyButtonDemo() {

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/copy-button.json

import { CopyButton } from "@/components/ui/copy-button"

<CopyButton value="Text to copy" />

Display next to a code snippet or command.

npm install nusa-ui

registry/examples/copy-button-with-text.tsx

import { CopyButton } from "@/registry/ui/copy-button"

export default function CopyButtonWithText() {

Use custom text or icons inside the button.

registry/examples/copy-button-custom.tsx

import { CopyButton } from "@/registry/ui/copy-button"

export default function CopyButtonCustom() {

Extends the Button component with copy functionality.

Prop	Type	Default	Description
`value`	`string`	-	The text to copy to clipboard
`onCopy`	`() => void`	-	Called after successful copy
`timeout`	`number`	`2000`	Duration of success state (ms)
`variant`	`string`	`"outline"`	Button variant
`size`	`string`	`"icon"`	Button size

All other Button props are supported.