Clipboard FieldNew

A one-click install/copy field that morphs between the command and a success label using CSS grid fr tracks — JS only copies and toggles state.

Interaction Type

Click (or activate with keyboard) to copy the command. The field morphs width via grid-template-columns, blurs between command and success text, then resets after a short delay. Respects reduced motion.

Props

Options you can pass to customize this component.

Prop

Type

Description

value*

string

Command or string written to the clipboard.

prompt

string

Leading prompt glyph (default: "$").

copiedLabel

string

Success label after copy (default: "Copied to clipboard").

copyLabel

string

Accessible label while idle (default: "Copy to clipboard").

resetDelay

number

Milliseconds the success state stays visible (default: 2000).

onCopy

() => void

Callback after a successful clipboard write.

hideIcon

boolean

Hide the trailing copy/check icon.

disabled

boolean

Disable interaction.

className

string

Additional CSS classes.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/clipboard-field.json

How to use

import { ClipboardField } from "@/components/ui/clipboard-field"

export function Demo() {
  return (
    <ClipboardField
      value="npx shadcn@latest add @nexvyn/badge"
      onCopy={() => console.log("copied")}
    />
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/clipboard-field.json