Copy value

A React copy-to-clipboard component for DNS names, targets, and tokens, with an accessible button. Install it with the shadcn CLI.

copy-value shows a string and copies it after a user action. It does not depend on DomainKit records, transport, or observation state.

import { CopyValue } from "../../registry/ui/copy-value.tsx";

export default function CopyValueExample() {
  return (
    <div className="grid gap-3 text-sm">
      <CopyValue value="edge.acme.dev" />
      <CopyValue value="acme-verify=7f3a" />
    </div>
  );
}

Installation

npx shadcn@latest add https://domain-kit.dev/r/copy-value.json

pnpm dlx shadcn@latest add https://domain-kit.dev/r/copy-value.json

yarn dlx shadcn@latest add https://domain-kit.dev/r/copy-value.json

bunx shadcn@latest add https://domain-kit.dev/r/copy-value.json

nubx shadcn@latest add https://domain-kit.dev/r/copy-value.json

aube dlx shadcn@latest add https://domain-kit.dev/r/copy-value.json

Usage

<CopyValue value="v=spf1 include:example.net ~all" />

The component uses navigator.clipboard when available and reports its temporary copied state in the button label and data-copied attribute. If the browser blocks clipboard access, the value stays unchanged.

API

CopyValue also accepts native span props and className. Its action uses the installed shadcn Button primitive.

The button label includes the action and value. Keep the value meaningful and do not replace the label with an unlabeled icon-only control.