Clipboard

A component to copy text to the clipboard.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/clipboard.json


import { 
  Clipboard, 
  ClipboardTrigger, 
  ClipboardIndicator 
} from "@/components/ui/clipboard";


<Clipboard value="https://x.com/vinihvc">
  <ClipboardTrigger>
    <ClipboardIndicator />
  </ClipboardTrigger>
</Clipboard>

Use the onStatusChange prop to control the clipboard value programmatically.

Use the copied prop on <ClipboardIndicator /> to customize the icon shown when copied.

Add a children to the <ClipboardIndicator /> to customize the icon shown when not copied.

Use <ClipboardValue /> to display the value as text instead of an input field.

https://x.com/vinihvc

Use the timeout prop on <Clipboard /> to customize how long the copied state is shown.

Root wrapper. Manages copy state and value.

Prop	Type	Default
`value`	`string`	required
`timeout`	`number`	`2000`
`onStatusChange`	`({ copied }: StatusChangeDetails) => void`	`-`
`className`	`string`	`-`

Triggers copy to clipboard on click.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

Input showing the value to copy. Often hidden or read-only.

Prop	Type	Default
`className`	`string`	`-`

Icon that changes based on copy state (e.g. copy vs check).

Text display of the value. Use when input is not needed.

For a complete list of props, see the Ark UI documentation.

On This Page