Editable Text
Inline editable text with animated border reveal, shimmer effect, and smooth save/cancel controls.
Click me to edit
Hover to see the shimmer, click to edit, Enter to save, Escape to cancel.
Author:
Small inline text
Installation
npx shadcn@latest add https://wise-ui.com/r/editable-text.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | The controlled text value. |
| onChange | (value: string) => void | — | Callback fired when the user saves edited text. |
| className | string | — | Additional CSS classes applied to the wrapper. Font styles are inherited by the input. |
| placeholder | string | "Click to edit..." | Placeholder shown when value is empty. |