Copy Field

A read-only monospace value with a copy button.

Invite link

https://example.com/invite/7f3a9c

import { CopyField } from "@/components/ui/copy-field";

export default function CopyFieldBasic() {
  return (
    <CopyField label="Invite link" value="https://example.com/invite/7f3a9c" className="max-w-sm" />
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add copy-field
pnpm dlx shadcn@latest add @jarvis/copy-field

Usage

import { CopyField } from "@/components/ui/copy-field";

export function ApiKey() {
  return <CopyField label="API key" value="pk_live_51HcK2vQx8" />;
}

Long values scroll sideways. The button confirms the copy, including to screen readers.

Examples

Without a label

Leave out label when the context makes it clear.

git clone https://example.com/acme/website.git

import { CopyField } from "@/components/ui/copy-field";

export default function CopyFieldWithoutLabel() {
  return <CopyField value="git clone https://example.com/acme/website.git" className="max-w-sm" />;
}

Copying on click

copyOnClick copies when anywhere in the row is clicked, as long as no text in it is selected. The button still copies from the keyboard.

pnpm dlx shadcn@latest add @jarvis/button

import { CopyField } from "@/components/ui/copy-field";

export default function CopyFieldCopyOnClick() {
  return (
    <CopyField value="pnpm dlx shadcn@latest add @jarvis/button" copyOnClick className="max-w-sm" />
  );
}

Confirming a copy

onCopy runs after the value is copied, such as to show a toast.

Install

pnpm dlx shadcn@latest add @jarvis/button

import { CopyField } from "@/components/ui/copy-field";
import { toast } from "@/components/ui/toast";

export default function CopyFieldOnCopy() {
  return (
    <CopyField
      label="Install"
      value="pnpm dlx shadcn@latest add @jarvis/button"
      onCopy={() => toast.add({ title: "Copied to clipboard" })}
      className="max-w-sm"
    />
  );
}

Copy button

To copy a value shown some other way, use Copy Button on its own.

Props

CopyField takes the props of a <div>.

Part	Extends
CopyField	<div>

CopyField

Prop	Type	Default
`children` Shown in place of `value`, such as the same text with its parts colored. `value` is still what's copied.	`React.ReactNode`	—
`value` The text shown and copied, such as a command or a key.	`string`	—
`label` Optional small label above the row.	`React.ReactNode`	—
`icon` Optional icon before the value, such as a terminal prompt for a command.	`React.ReactNode`	—
`copyOnClick` Copies when anywhere in the row is clicked, not only the button.	`boolean`	`false`
`timeout` How long the copied or failed state lasts, in ms.	`number`	—
`onCopy`	`((value: string) => void)`	—