Components
Clipboard

Clipboard

A simple component to copy text to the clipboard

Usage

import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import * as Clipboard from '~/components/ui/clipboard'
import { FormLabel } from '~/components/ui/form-label'
import { IconButton } from '~/components/ui/icon-button'
import { Input } from '~/components/ui/input'

export const Demo = (props: Clipboard.RootProps) => {
  return (
    <Clipboard.Root value="https://park-ui.com" {...props}>
      <Clipboard.Label asChild>
        <FormLabel>Copy this link</FormLabel>
      </Clipboard.Label>
      <Clipboard.Control>
        <Clipboard.Input asChild>
          <Input />
        </Clipboard.Input>
        <Clipboard.Trigger asChild>
          <IconButton variant="outline">
            <Clipboard.Indicator copied={<CheckIcon />}>
              <ClipboardCopyIcon />
            </Clipboard.Indicator>
          </IconButton>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

Installation

1

Add Component

Insert code snippet into your project. Update import paths as needed.

import { Clipboard } from '@ark-ui/react/clipboard'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { clipboard } from 'styled-system/recipes'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(clipboard)

export const Root = withProvider(styled(Clipboard.Root), 'root')
export const Control = withContext(styled(Clipboard.Control), 'control')
export const Indicator = withContext(styled(Clipboard.Indicator), 'indicator')
export const Input = withContext(styled(Clipboard.Input), 'input')
export const Label = withContext(styled(Clipboard.Label), 'label')
export const Trigger = withContext(styled(Clipboard.Trigger), 'trigger')

export interface RootProps extends ComponentProps<typeof Root> {}
export interface ControlProps extends ComponentProps<typeof Control> {}
export interface IndicatorProps extends ComponentProps<typeof Indicator> {}
export interface InputProps extends ComponentProps<typeof Input> {}
export interface LabelProps extends ComponentProps<typeof Label> {}
export interface TriggerProps extends ComponentProps<typeof Trigger> {}
2

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

import { clipboardAnatomy } from '@ark-ui/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'

export const clipboard = defineSlotRecipe({
  className: 'clipboard',
  slots: clipboardAnatomy.keys(),
  base: {
    root: {
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5',
    },
    control: {
      display: 'flex',
      gap: '3',
    },
  },
})

On this page