PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Copy Bar

A command-line copy bar with perimeter SVG progress countdown and morphing check confirmation.

When to use

  • Displaying CLI terminal install commands, package manager snippets, and API tokens.
  • Providing visual timing feedback so users know exactly how long the copied state remains active.
  • Compact single-line code blocks requiring accessible clipboard copy functionality.

When not to use

  • Multi-line syntax-highlighted code editors.
  • Plain text inputs where users are expected to edit the content.

API Reference

CopyBarProps

PropTypeDefaultDescription
textstring—The text snippet or command to display and copy to clipboard.
durationMsnumber3000Duration in milliseconds that the copied confirmation state remains active.
onCopy(text: string) => void—Optional callback invoked when the user copies the text.
showBorderProgressbooleantrueWhether to display the animated SVG perimeter progress countdown stroke.
classNamestring—Additional CSS class names.

Motion

  • Micro-spring bounce (stiffness 500, damping 22) on tap/click interaction.
  • Linear SVG strokeDashoffset countdown mapping exactly to durationMs.
  • Morphing icon animation between Clipboard and Check icons via MorphIcon.