Copy Field

New

A command to copy, with a ghost and a counter on every copy

$ npx @hritik-sharmaa/repeat-ui add commons-copy-field
Category
Commons
Added
Nov 1, 2026
Version
1.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview
$npx @hritik-sharmaa/repeat-ui add button-echo
Customize
import CommonsCopyField from "@/components/repeat-ui/commons-copy-field/preview";

<CommonsCopyField text="npx @hritik-sharmaa/repeat-ui add button-echo" prefix="$" />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add commons-copy-field --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/commons-copy-field/.

    import CommonsCopyField from "@/components/repeat-ui/commons-copy-field/preview";

export default function Page() {
  return <CommonsCopyField />;
}

Props

PropTypeDefaultDescription
textstring"npx @hritik-sharmaa/repeat-ui add button-echo"The text to copy.
prefixstring"$"Shown before the text in the accent colour.
accentColorstring"#fa5f1b"Prefix, ghost, shine and counter colour.
backgroundstring"#0a0a0a"Field background.
textColorstring"#e5e5e5"Text colour.
showCountbooleantrueCount repeat copies (×2, ×3).
onCopy(count: number) => void-Called after each copy, with how many times it has been copied.
classNamestring""Extra classes for the root element.

More commons

See all
AccordianAccordion component with smooth expand/collapse animations
Document Upload ModalDocument upload modal with drag and drop support
Search BarSearch bar component with keyboard shortcuts (Ctrl+K) and modal support