Clipboard

A component to copy text to the clipboard

import { Clipboard } from '@fidely-ui/react/clipboard'

export const ClipboardBasics = () => {
  return (
    <Clipboard.Root value="https://fidely-ui.vercel.app/">
      <Clipboard.Control>
        <Clipboard.Trigger>
          <Clipboard.Indicator />
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

Usage

import { Clipboard } from '@fidely-ui/react'

<Clipboard.Root>
  <Clipboard.Trigger>
    <Clipboard.CopyText />
    <Clipboard.Indicator />
  </Clipboard.Trigger>
  <Clipboard.Input />
</Clipboard.Root>

Examples

Input

Use the Clipboard.Input component to create a copy input.

Copy this link

import { Clipboard, IconButton, Input } from '@fidely-ui/react'
import { FaCheckDouble } from 'react-icons/fa6'
import { IoCopyOutline } from 'react-icons/io5'

export const ClipboardWithInput = () => {
  return (
    <Clipboard.Root value="https://fidely-ui.vercel.app/">
      <Clipboard.Label>Copy this link</Clipboard.Label>
      <Clipboard.Control>
        <Clipboard.Input asChild>
          <Input />
        </Clipboard.Input>
        <Clipboard.Trigger asChild>
          <IconButton variant="outline">
            <Clipboard.Indicator copied={<FaCheckDouble />}>
              <IoCopyOutline />
            </Clipboard.Indicator>
          </IconButton>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

Timer

Use the timeout prop to change the duration of the copy message.

import { Clipboard } from '@fidely-ui/react'

export const ClipboardWithTimer = () => {
  return (
    <Clipboard.Root value="https://fidely-ui.vercel.app/" timeout={2000}>
      <Clipboard.Control>
        <Clipboard.Trigger>
          <Clipboard.Indicator />
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

Store

You can use the useClipboard hook to create a custom clipboard component.

'use client'

import { Button, useClipboard } from '@fidely-ui/react'

export const ClipboardWithStore = () => {
  const clipboard = useClipboard({ value: 'https://fidely-ui.vercel.app/' })

  return (
    <Button size="sm" onClick={clipboard.copy}>
      {clipboard.copied ? 'Copied' : 'Copy'}
    </Button>
  )
}

With Status Text

You can use the Clipboard.Status to show a copy text.

import { Button, Clipboard } from '@fidely-ui/react'

export const ClipboardWithStatusText = () => {
  return (
    <Clipboard.Root value="https://fidely-ui.vercel.app/">
      <Clipboard.Control>
        <Clipboard.Trigger asChild>
          <Button>
            <Clipboard.Indicator />
            <Clipboard.Status />
          </Button>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

Root Provider

Use the useClipboard hook together with the Clipboard.RootProvider component to manually control the clipboard’s state and behavior.

This setup gives you maximum flexibility — you can:

Access clipboard state programmatically (e.g. clipboard.copied).
Trigger copying from anywhere using clipboard.copy().
Share the same clipboard store across multiple components.

When using Clipboard.RootProvider, you don’t need to use Clipboard.Root.

Copy this link

'use client'

import { Clipboard, useClipboard } from '@fidely-ui/react'

export const ClipboardRootProvider = () => {
  const clipboard = useClipboard({ value: 'https://fidely-ui.vercel.app/' })

  return (
    <Clipboard.RootProvider value={clipboard}>
      <Clipboard.Label>Copy this link</Clipboard.Label>
      <Clipboard.Control>
        <Clipboard.Input />
        <Clipboard.Trigger>
          <Clipboard.Indicator />
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.RootProvider>
  )
}

Props

Clipboard.Root

Prop	Type	Default	Description
`timeout`	`number`	`3000ms`	Duration (in milliseconds) for how long the copied indicator or status text is displayed.
`onCopy`	`(value: string) => void`	`-`	Callback fired after text is successfully copied.
`value`	`string`	`-`	The text value to be copied. If not provided, it’s taken from the `Clipboard.Input`.

Clipboard.Trigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Passes the trigger props to a custom child component instead of rendering a default element.

Clipboard.Input

Prop	Type	Default	Description
`readOnly`	`boolean`	`true`	Makes the input field read-only (recommended).
`asChild`	`boolean`	`false`	Passes the custom child component instead of rendering a default element.

useClipboard Hook

Property	Type	Description
`copied`	`boolean`	Whether the text has been successfully copied.
`value`	`string`	The current value managed by the clipboard store.
`copy`	`(value?: string) => void`	Function to trigger the copy action manually.
`setValue`	`(value: string) => void`	Updates the clipboard value.