React Typed Confirmation Dialog
A guard for destructive actions: the confirm button stays disabled until the user types an exact phrase — usually the resource name — the way GitHub gates repository deletion. The input turns green on an exact match, Enter confirms, and Escape or the overlay cancels. Controlled via open / onOpenChange.
Danger zone
Permanently delete the hakursn/aes-core repository. This cannot be undone.
Installation
npx shadcn@latest add "https://kelvinui.com/registry/typed-confirm.json"
Props
| Prop | Type | Description |
|---|---|---|
| open | boolean | Whether the dialog is shown |
| onOpenChange | (open: boolean) => void | Open/close handler |
| onConfirm | () => void | Fires only when the typed phrase matches exactly |
| phrase | string | The exact text the user must type |
| title | string | Dialog title |
| description | ReactNode | Consequences of the action |
| prompt | string | Instruction with a {phrase} placeholder |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.