1

Input CopyNew

A copy-to-clipboard field that shows a monospace value with an icon or button trigger, animating a checkmark on copy.

Dependencies

motion

Interaction Type

Hover field for micro-clicks; click to copy the value with tactile audio feedback. The icon morphs into a checkmark.

Props

Options you can pass to customize this component.

Prop
Type
Description
value
string

The value to display and copy to clipboard.

label
string

Optional label displayed above the value.

onCopy
() => void

Called after the value is copied.

variant
"icon" | "button"

Icon-only with tooltip, or a labeled button. Defaults to "icon".

align
"right" | "left"

Position of the copy action relative to the value. Defaults to "right".

disabled
boolean

Disables copying.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/input-copy.json

How to use

import { InputCopy } from "@/components/ui/input-copy"

export function Demo() {
  return <InputCopy label="API Key" value="sk-proj-a1b2c3d4e5f6" variant="button" />
}

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.
API Key
npx shadcn@latest addhttps://ui.nexvyn.dev/r/input-copy.json