Copyable Text
Monospace IDs and tokens with truncation and copy-to-clipboard.
Long non-secret identifiers (workflow IDs, task IDs, request IDs) need a compact row: truncated display, full value on copy, and an optional copy control aligned to the right.
Not for secrets
Copyable Text is usually not meant for secret values — passwords, API keys, session tokens, private keys, or other credentials that should not appear in the DOM, tooltips, or the system clipboard from a one-click control. Use masked inputs, reveal-on-demand flows, and server-side handling for secrets; reserve this component for public or low-sensitivity IDs you expect users to copy routinely.
Installing
npx shadcn@latest add @f-ui/copyable-textUsage
import { CopyableText } from "@/components/f-ui/copyable-text/copyable-text";
<CopyableText value={workflowId} />
<CopyableText
value={workflowId}
truncate={{ mode: "middle", prefix: 8, suffix: 4 }}
/>Examples
End truncate (CSS, fits container)
550e8400-e29b-41d4-a716-446655440000Middle truncate (prefix + suffix)
550e8400…0000Middle truncate (prefix only) — copy always full ID
550e8400-e29…Copy always visible
c7a5f8…1b0f23"use client";
import { CopyableText } from "@/components/f-ui/copyable-text/copyable-text";
const WORKFLOW_ID = "550e8400-e29b-41d4-a716-446655440000";
const TASK_ID = "c7a5f8e2-1b3d-4e9a-9c2f-8d4e6a1b0f23";
export function CopyableTextDemo() {
return (
<div className="max-w-md space-y-6">
<div className="space-y-2">
<p className="text-muted-foreground text-xs">
End truncate (CSS, fits container)
</p>
<CopyableText value={WORKFLOW_ID} />
</div>
<div className="space-y-2">
<p className="text-muted-foreground text-xs">
Middle truncate (prefix + suffix)
</p>
<CopyableText
value={WORKFLOW_ID}
truncate={{ mode: "middle", prefix: 8, suffix: 4 }}
/>
</div>
<div className="space-y-2">
<p className="text-muted-foreground text-xs">
Middle truncate (prefix only) — copy always full ID
</p>
<CopyableText
value={WORKFLOW_ID}
truncate={{ mode: "middle", prefix: 12, suffix: 0 }}
/>
</div>
<div className="space-y-2">
<p className="text-muted-foreground text-xs">
Copy always visible
</p>
<CopyableText
value={TASK_ID}
copyVisibility="always"
truncate={{ mode: "middle", prefix: 6, suffix: 6 }}
/>
</div>
</div>
);
}API Reference
| Prop | Description |
|---|---|
value | Visible string (may be pre-shortened; title uses this for hover). |
copyValue | Clipboard payload; defaults to value. |
truncate | false, { mode: "end" } (CSS truncate in flex), or { mode: "middle", prefix?, suffix?, ellipsis? }. |
showCopy | Show copy button. Default true. |
copyVisibility | "hover" (default) or "always". |
asCode | Render in <code>. Default true. |
formatCopyableTextDisplay is exported from format-copyable-text.ts for tests or custom layouts.