Clipboard

A component to copy text to the clipboard.

Installation


pnpm dlx shadcn@latest add @shark-ui/clipboard


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


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

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 the timeout prop on <Clipboard /> to customize how long the copied state is shown.

Use the onStatusChange prop to control the clipboard value programmatically.

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

https://x.com/vinihvc

Root element of the clipboard. Renders a div

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

Button that triggers the copy action. Renders a button

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

Input field that displays the value. Renders an input

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

Indicator that shows different icons based on the copied state. Renders a span

Prop	Type	Default
`copied`	`ReactNode`	`<Check />`
`className`	`string`	`-`

Text element that displays the value. Renders a span

Prop	Type	Default
`size`	`"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`	`"md"`
`className`	`string`	`-`

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

On This Page