Copy value

Display a compact DNS value with an accessible clipboard action and optional copied and copy icons that your application can customize.

copy-value displays a string and copies it after a user action. It is independent of DomainKit records, transport, and observation state.

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

export default function CopyValueExample() {
  return (
    <div className="grid gap-3 text-sm">
      <CopyValue value="feedback-smtp.example.net" />
      <CopyValue value="v=spf1 include:example.net ~all" />
    </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

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. Clipboard permission failures leave the value intact.

API

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

The generated button is labeled with the action and value, so keep the value meaningful and do not replace the accessible label with an unlabeled icon-only control.