Clipboard | Park UI

Installation

npx @park-ui/cli add clipboard

Add Component

Copy the code snippet below into you components folder.

'use client'
import { Clipboard } from '@ark-ui/react/clipboard'
import { CheckIcon, CopyIcon } from 'lucide-react'
import { type ComponentProps, forwardRef } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { clipboard } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(clipboard)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(Clipboard.Root, 'root')
export const RootProvider = withProvider(Clipboard.RootProvider, 'root')
export const Control = withContext(Clipboard.Control, 'control')
export const Input = withContext(Clipboard.Input, 'input')
export const Label = withContext(Clipboard.Label, 'label')
export const Trigger = withContext(Clipboard.Trigger, 'trigger')

export { ClipboardContext as Context } from '@ark-ui/react/clipboard'

type IndicatorProps = ComponentProps<typeof StyledIndicator>

const StyledIndicator = withContext(Clipboard.Indicator, 'indicator')

export const Indicator = forwardRef<HTMLDivElement, IndicatorProps>(function Indicator(props, ref) {
  return (
    <StyledIndicator ref={ref} copied={<CheckIcon />} {...props}>
      <CopyIcon />
    </StyledIndicator>
  )
})

export const CopyText = forwardRef<HTMLDivElement, IndicatorProps>(function CopyText(props, ref) {
  return (
    <StyledIndicator ref={ref} copied="Copied" {...props}>
      Copy
    </StyledIndicator>
  )
})

Integrate Recipe

Integrate this recipe in to your Panda config.

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

export const clipboard = defineSlotRecipe({
  className: 'clipboard',
  slots: clipboardAnatomy.keys(),
  base: {
    root: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'flex-start',
      gap: '1.5',
    },
    label: {
      fontWeight: 'medium',
      textStyle: 'sm',
      color: 'fg.default',
      gap: '0.5',
    },
  },
})

Usage

import { Clipboard } from '@/components/ui'

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

Examples

Button

Use the Clipboard.Trigger component to create a copy button.

Input

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

Document Link

Timeout

Use the timeout prop to set the duration of the copied state.

Props

Root

Prop	Default	Type
`timeout`	`3000`	`number` The timeout for the copy operation
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`		`string` The initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; input: string; label: string }>` The ids of the elements in the clipboard. Useful for composition.
`onStatusChange`		`(details: CopyStatusDetails) => void` The function to be called when the value is copied to the clipboard
`onValueChange`		`(details: ValueChangeDetails) => void` The function to be called when the value changes
`value`		`string` The controlled value of the clipboard

Indicator

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`copied`		`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`