CopyableText

Text with inline copy button.

displayclipboardutility

Import

import { CopyableText } from "@/components/ui";

Basic Usage

CopyableText Preview

npm install @starter/ui

sk_live_abc123xyz789

Code

tsx

<CopyableText text="sk_live_abc123xyz" />

Truncated

Truncate long text

1<CopyableText
2  text="sk_live_abc123xyz789def456ghi"
3  truncate
4/>

API Key Display

Common use case for secrets

1<div className="space-y-2">
2  <Label>API Key</Label>
3  <div className="p-3 bg-muted rounded-md font-mono text-sm">
4    <CopyableText text="sk_live_abc123xyz789def456ghi" truncate />
5  </div>
6</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring