shadcn.io is not affiliated with official shadcn/ui

Shadcn Clipboard for React Radix UI

Copy text to the clipboard.

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/clipboard.json

Anatomy

Clipboard
├── ClipboardControl
├── ClipboardTrigger
├── ClipboardIndicator
├── ClipboardInput
└── ClipboardLabel

Usage

import { SITE_URL } from "@/lib/brand";
import { Button } from "@/components/ui/button";
import {
  Clipboard,
  ClipboardIndicator,
  ClipboardInput,
  ClipboardTrigger,
} from "@/components/ui/clipboard";

<div className="w-full max-w-sm">
  <Clipboard value={SITE_URL}>
    <ClipboardInput />
    <ClipboardTrigger asChild>
      <Button size="icon-md">
        <ClipboardIndicator />
      </Button>
    </ClipboardTrigger>
  </Clipboard>
</div>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Context

PreviewCode

Controlled

PreviewCode

Copy Status

PreviewCode

Custom Timeout

PreviewCode

Different Icon

PreviewCode

Icon Only

PreviewCode

Root Provider

PreviewCode

Value Text

PreviewCode

With Label

PreviewCode

API Reference

Clipboard

div

PropType

rootClassName?string

asChild?boolean

className?string

AttributeType

data-slot"clipboard"

data-scope"clipboard"

data-part"root"

data-copied?string

ClipboardControl

div

PropType

rootClassName?string

asChild?boolean

AttributeType

data-slot"clipboard-control"

data-scope"clipboard"

data-part"control"

data-copied?string

ClipboardTrigger

button

PropType

rootClassName?string

asChild?boolean

AttributeType

data-slot"clipboard-trigger"

data-scope"clipboard"

data-part"trigger"

aria-labelstring

data-copied?string

type"button"

ClipboardIndicator

div

PropType

copied?ReactNode

rootClassName?string

asChild?boolean

className?string

AttributeType

data-slot"clipboard-indicator"

data-scope"clipboard"

data-part"indicator"

ClipboardInput

input

PropType

rootClassName?string

asChild?boolean

className?string

AttributeType

data-slot"clipboard-input"

data-scope"clipboard"

data-part"input"

data-copied?string

data-readonly"true"

ClipboardLabel

label

PropType

rootClassName?string

asChild?boolean

className?string

AttributeType

data-slot"clipboard-label"

data-scope"clipboard"

data-part"label"

data-copied?string

ClipboardValue

span

PropType

rootClassName?string

size?"xs" | "sm" | "md" | "lg" | "xl"

useSortedKeys?"xs" | "sm" | "md" | "lg" | "xl"

asChild?boolean

className?string

AttributeType

data-slot"clipboard-value"

data-scope"clipboard"

data-part"value-text"

ClipboardRootProvider

div

PropType

valueUseClipboardReturn

rootClassName?string

asChild?boolean

className?string

AttributeType

data-slot"clipboard"

data-scope"clipboard"

data-part"root"

data-copied?string

useClipboard

PropType

rootClassName?string

ClipboardContext

PropType

copiedboolean

copyVoidFunction

setValue(value: string) → void

valuestring