GitHub55X

Clipboard

Vue clipboard component to copy text to the clipboard with a trigger and copied-state feedback.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/clipboard.json

Usage

      
      <script setup lang="ts">
import { Clipboard } from "@/components/ui/clipboard";
</script>

<template>
  <Clipboard.Root>
    <!-- … -->
  </Clipboard.Root>
</template>

Composition

      
      Clipboard.Root
├── Clipboard.Label
├── Clipboard.Control
│   ├── Clipboard.Input
│   └── Clipboard.Trigger
│       └── Clipboard.Indicator
├── Clipboard.Context
├── Clipboard.RootProvider
└── Clipboard.ValueText

Examples

Controlled

Control the clipboard value externally by managing the state yourself and using onValueChange to handle updates.

Root Provider

An alternative way to control the clipboard is to use the RootProvider component and the useClipboard hook. This way you can access the state and methods from outside the component.

Context

Access the clipboard's state with Clipboard.Context or the useClipboardContext hook. You get properties like copied, value, and setValue.

Copy Status

Use the onStatusChange prop to listen for copy operations. It exposes a copied property that you can use to display a success message.

Timeout

Configure the copy status timeout duration using the timeout prop. Default is 3000ms (3 seconds).

Value Text

Use Clipboard.ValueText to display the current clipboard value.

API

See Ark UI Clipboard docs for full props and examples.

CheckboxCollapsible