ns-ui
A copyable value field whose confirmation is typographic — letter-spacing crimps shut in a wave from the clicked character, then a check scales into the icon slot and holds. No toast, no green flash.
Use when a copy-to-clipboard value field (API key, ID, hash) whose success feedback happens co-located in the string itself — a letter-spacing crimp wave from the clicked character plus an inline check that scales in and holds — with no toast or color flash elsewhere on screen; not for keyboard-shortcut reference (shortcuts-cheat-sheet) or code entry (otp-reel).
Install
npx shadcn add https://design.helpmarq.comns-ui / copy-field-crimp — click the value to copy
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | The real value copied to the clipboard. |
| label? | string | — | Optional caption above the field, e.g. "API key". Also seeds the default accessible name. |
| masked? | boolean | — | Render the value as bullets instead of its characters. The real value still copies. |
| ariaLabel? | string | — | Overrides the copy button's accessible name entirely. Never derived from `value`. |
| onCopy? | (value: string) => void | — | — |
| className? | string | — | — |