Clipboard

Copy Markdown

Copy text to the clipboard.

Docs API

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

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#

PreviewCode

Change URL

Examples#

Icon Only#

PreviewCode

Different Icons#

PreviewCode

Value Text#

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

PreviewCode

https://x.com/vinihvc

Custom Timeout#

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

PreviewCode

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"
`className`	`string`	`-`
`asChild`	`boolean`	`false`

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

[

Circular Slider ](/docs/components/circular-slider)[

Collapsible ](/docs/components/collapsible)

On This Page

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