ui / actions

Copy Control

Clipboard control with clear transient success feedback.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

INSTALL / SOURCE REGISTRY

Add Copy Control to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/copy-control.json

registry/default/ui/copy-control.tsx

"use client"

import * as React from "react"
import { Check, Copy } from "lucide-react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

export function CopyControl({ value, label = "Copy", className }: { value: string; label?: string; className?: string }) {
  const [copied, setCopied] = React.useState(false)
  const copy = async () => { await navigator.clipboard.writeText(value); setCopied(true); window.setTimeout(() => setCopied(false), 1600) }
  return <button type="button" className={cn("dos-button dos-button--ghost dos-button--sm", className)} onClick={copy} aria-label={copied ? "Copied" : label}>{copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}{copied ? "Copied" : label}</button>
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy