Clipboard

Copy text to the clipboard.

Installation


pnpm dlx shadcn@latest add @shark/clipboard

Anatomy


Clipboard
├── ClipboardTrigger
│   └── ClipboardIndicator
├── ClipboardInput
└── ClipboardValue

Usage


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


<Clipboard value="https://x.com/vinihvc">
  <ClipboardTrigger asChild>
    <Button size="icon-md">
      <ClipboardIndicator />
    </Button>
  </ClipboardTrigger>
</Clipboard>

Controlled

Examples

Icon Only

Different Icons

Value Text

Use ClipboardValue component to display the value as text instead of an input field.

https://x.com/vinihvc

Custom Timeout

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

API Reference

Clipboard

Root wrapper. Manages copy state and value.

Prop	Type	Default
`value`	`string`	required
`timeout`	`number`	`2000`
`className`	`string`	`-`

ClipboardTrigger

Triggers copy to clipboard on click.

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

ClipboardInput

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

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

ClipboardIndicator

Icon that changes based on copy state.

Prop	Type	Default
`copied`	`ReactNode`	`CheckIcon`
`className`	`string`	`-`

ClipboardValue

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

Prop	Type	Default
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`
`className`	`string`	`-`
`asChild`	`boolean`	`false`

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

Circular Slider

Collapsible

On This Page

Installation Anatomy Usage Controlled Examples Icon Only Different Icons Value Text Custom Timeout API Reference Clipboard ClipboardTrigger ClipboardInput ClipboardIndicator ClipboardValue