Clipboard
A component to copy text to the clipboard
Anatomy
To set up the Clipboard correctly, you'll need to understand its anatomy and how we name its parts.
Each part includes a
data-partattribute to help identify them in the DOM.
Examples
Learn how to use the Clipboard component in your project. Let's take a look at the most basic
example:
import { Clipboard } from '@ark-ui/react/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
export const Basic = () => {
return (
<Clipboard.Root value="https://ark-ui.com">
<Clipboard.Label>Copy this link</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator copied={<CheckIcon />}>
<ClipboardCopyIcon />
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.Root>
)
}
import { Clipboard } from '@ark-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
export const Basic = () => {
return (
<Clipboard.Root value="https://ark-ui.com">
<Clipboard.Label>Copy this link</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator copied={<CheckIcon />}>
<ClipboardCopyIcon />
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.Root>
)
}
<script setup lang="ts">
import { Clipboard } from '@ark-ui/vue/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
</script>
<template>
<Clipboard.Root value="https.//ark-ui.com">
<Clipboard.Label>Copy this link</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator>
<ClipboardCopyIcon />
<template #copied>
<CheckIcon />
</template>
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.Root>
</template>
Using the Root Provider
The RootProvider component provides a context for the clipboard. It accepts the value of the useClipboard hook.
You can leverage it to access the component state and methods from outside the clipboard.
import { Clipboard, useClipboard } from '@ark-ui/react/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
export const RootProvider = () => {
const clipboard = useClipboard({ value: 'https://ark-ui.com' })
return (
<>
<button onClick={() => clipboard.copy()}>Copy</button>
<Clipboard.RootProvider value={clipboard}>
<Clipboard.Label>Copy this link</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator copied={<CheckIcon />}>
<ClipboardCopyIcon />
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.RootProvider>
</>
)
}
import { Clipboard, useClipboard } from '@ark-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
export const RootProvider = () => {
const clipboard = useClipboard({ value: 'https://ark-ui.com' })
return (
<>
<button onClick={() => clipboard().copy()}>Copy</button>
<Clipboard.RootProvider value={clipboard}>
<Clipboard.Label>Copy this link</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator copied={<CheckIcon />}>
<ClipboardCopyIcon />
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.RootProvider>
</>
)
}
<script setup lang="ts">
import { Clipboard, useClipboard } from '@ark-ui/vue/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
const clipboard = useClipboard({ value: 'https.//ark-ui.com' })
</script>
<template>
<button @click="clipboard.copy()">Copy</button>
<Clipboard.RootProvider :value="clipboard">
<Clipboard.Label>Copy this link</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator>
<ClipboardCopyIcon />
<template #copied>
<CheckIcon />
</template>
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.RootProvider>
</template>
If you're using the
RootProvidercomponent, you don't need to use theRootcomponent.