Open source confirmation components for shadcn/ui: undo, hold to confirm, type to confirm and more. Built on Base UI.
An agent turn with four tool calls waiting for approval, from a low-risk message that approves with undo to a critical delete that asks for the project name. Each call shows its tool, risk and arguments, then its result once it runs.
A list of API keys with the last time each was used, hold to revoke, and a Create key dialog that shows the new secret once with a copy button.
An issue list with row checkboxes whose delete asks for more as the count grows: an undo window for one or two, a second click for a few, and the typed count for more.
A plan card whose cancel dialog lists what goes away and when, offers a cheaper plan instead, and cancels on a second click.
A Button that confirms on a click, a second click or a press and hold. Supports inline undo and a pending state for an async onConfirm.
An alert dialog with a ConfirmButton or TypeToConfirm as its confirm action, which closes only after an async onConfirm settles. Includes useConfirm, which returns an awaitable confirm() and a dialog element you render yourself.
A DropdownMenu or ContextMenu item that confirms on a click, a second click or a press and hold. The menu stays open while the item is armed, held, pending or showing Undo, and closes once the action commits.
A popover anchored to any trigger, with one line about the consequence and a ConfirmButton, for actions that need a sentence but not a dialog. It stays open while an async onConfirm is pending.
A Switch that moves right away and can be taken back: flipping it again during the undo window undoes it, and onConfirm(checked) runs when the window ends.
A list of what a confirmation will remove, with counts and names that collapse to "and N more". Pass it to TypeToConfirm or ConfirmDialog through their consequences prop.
A project settings danger zone: pause deployments with an undo window, transfer the project in a dialog that shows what changes, and delete it in a dialog that asks for the project name.
An account deletion screen with an export link first, a list of what gets deleted, and a form that unlocks after you type your email and check each acknowledgement.
A file list where selected files move to trash with an undo toast, a Trash tab restores them one at a time, and an Empty trash dialog lists what goes and asks you to type a phrase.
A message list where archive and delete collapse the row in place with an Undo, and a reading pane whose toolbar archives on a second click and deletes on a hold.
A team settings form where any edit brings up a save bar. Discard asks for a second click, and leaving the page with unsaved changes asks whether to save, discard or keep editing.
A team members list whose row menu removes someone after a second click, and makes someone the owner after a dialog explains what changes.
Approve or deny an AI SDK tool call, or a batch of them, with a gesture that matches its risk: undo for low, click again for medium, hold for high and a typed phrase for critical. Pass addToolApprovalResponse from useChat as onRespond.
An inline form that calls onConfirm only after the exact phrase is typed and every acknowledgement is checked. Supports inline undo and a pending state for an async onConfirm.
Wraps a list item or table row. Removing it collapses the row in place to a label and an Undo button at the same height, then runs onConfirm when the undo window ends.
undoToast(message) shows a Sonner toast with an Undo button. It resolves true when the toast closes and false if Undo is clicked, so run the action only on true.
useUnsavedChanges asks before unsaved changes are lost: the browser's prompt on reload or close, an awaitable confirmLeave() for leaving a page, and Keep editing, Discard changes and an optional Save in a Dialog, Sheet or Drawer's footer before it closes.