# SureUI

> Open source confirmation components for shadcn/ui: undo, hold to confirm, type to confirm and more. Built on Base UI. Installed with the shadcn CLI from the `@sureui` registry.

Every component except ToolApproval takes the same `onConfirm`, which can return a promise, and sets `data-state` so you can style around it. `@sureui` is in the shadcn registry index, so installing needs no setup.

## Docs

- [Introduction](https://sureui.com/llms/introduction.md): Open source confirmation components for shadcn/ui: undo, hold to confirm, type to confirm and more. Built on Base UI.
- [Installation](https://sureui.com/llms/installation.md): Add SureUI to a shadcn/ui project with the shadcn CLI.
- [Choosing a confirmation](https://sureui.com/llms/choosing-a-confirmation.md): Match how risky an action is to the confirmation that asks for it.
- [Confirm Button](https://sureui.com/llms/confirm-button.md): A button that runs its action on a click, a second click or a press and hold, with optional undo.
- [Confirm Dialog](https://sureui.com/llms/confirm-dialog.md): An alert dialog that asks before an action runs, with a confirm button, a hold or a typed phrase, and an awaitable confirm().
- [Confirm Menu Item](https://sureui.com/llms/confirm-menu-item.md): A dropdown or context menu item that asks for a second click or a press and hold before it runs, with optional undo.
- [Confirm Popover](https://sureui.com/llms/confirm-popover.md): A popover anchored to its trigger with one line about the action and a confirm button.
- [Confirm Switch](https://sureui.com/llms/confirm-switch.md): A switch that moves right away and can be flipped back during the undo window.
- [Consequences](https://sureui.com/llms/consequences.md): A list of what a confirmation will remove, with counts and names.
- [Tool Approval](https://sureui.com/llms/tool-approval.md): Approve or deny an AI SDK tool call with a gesture that matches its risk.
- [Type to Confirm](https://sureui.com/llms/type-to-confirm.md): An inline form that unlocks its confirm button only after the exact phrase is typed.
- [Undo Toast](https://sureui.com/llms/undo-toast.md): A function that shows a toast with Undo and resolves whether the action should run.
- [Undoable](https://sureui.com/llms/undoable.md): A list item or table row that collapses in place to a label and Undo when it's removed.
- [Unsaved Changes](https://sureui.com/llms/unsaved-changes.md): Asks before unsaved changes are lost, when leaving a page or when closing a dialog.
- [Confirmation Core](https://sureui.com/llms/confirmation-core.md): useConfirmation, the hook every SureUI control is built on. Put click again, hold, slide and undo on any element.

## Registry items

This is every item. Install one with the exact command shown; don't guess other names.

- [@sureui/confirm-button](https://sureui.com/r/confirm-button.json): 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. Install: `npx shadcn@latest add @sureui/confirm-button`
- [@sureui/confirm-menu-item](https://sureui.com/r/confirm-menu-item.json): 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. Install: `npx shadcn@latest add @sureui/confirm-menu-item`
- [@sureui/confirm-switch](https://sureui.com/r/confirm-switch.json): 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. Install: `npx shadcn@latest add @sureui/confirm-switch`
- [@sureui/type-to-confirm](https://sureui.com/r/type-to-confirm.json): 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. Install: `npx shadcn@latest add @sureui/type-to-confirm`
- [@sureui/confirm-dialog](https://sureui.com/r/confirm-dialog.json): 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. Install: `npx shadcn@latest add @sureui/confirm-dialog`
- [@sureui/confirm-popover](https://sureui.com/r/confirm-popover.json): 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. Install: `npx shadcn@latest add @sureui/confirm-popover`
- [@sureui/consequences](https://sureui.com/r/consequences.json): 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. Install: `npx shadcn@latest add @sureui/consequences`
- [@sureui/undo-toast](https://sureui.com/r/undo-toast.json): 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. Install: `npx shadcn@latest add @sureui/undo-toast`
- [@sureui/undoable](https://sureui.com/r/undoable.json): 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. Install: `npx shadcn@latest add @sureui/undoable`
- [@sureui/unsaved-changes](https://sureui.com/r/unsaved-changes.json): 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. Install: `npx shadcn@latest add @sureui/unsaved-changes`
- [@sureui/tool-approval](https://sureui.com/r/tool-approval.json): 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. Install: `npx shadcn@latest add @sureui/tool-approval`
- [@sureui/danger-zone-01](https://sureui.com/r/danger-zone-01.json): 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. Install: `npx shadcn@latest add @sureui/danger-zone-01`
- [@sureui/api-keys-01](https://sureui.com/r/api-keys-01.json): 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. Install: `npx shadcn@latest add @sureui/api-keys-01`
- [@sureui/delete-account-01](https://sureui.com/r/delete-account-01.json): 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. Install: `npx shadcn@latest add @sureui/delete-account-01`
- [@sureui/team-members-01](https://sureui.com/r/team-members-01.json): A team members list whose row menu removes someone after a second click, and makes someone the owner after a dialog explains what changes. Install: `npx shadcn@latest add @sureui/team-members-01`
- [@sureui/file-manager-01](https://sureui.com/r/file-manager-01.json): 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. Install: `npx shadcn@latest add @sureui/file-manager-01`
- [@sureui/inbox-01](https://sureui.com/r/inbox-01.json): 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. Install: `npx shadcn@latest add @sureui/inbox-01`
- [@sureui/agent-approval-01](https://sureui.com/r/agent-approval-01.json): 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. Install: `npx shadcn@latest add @sureui/agent-approval-01`
- [@sureui/bulk-actions-01](https://sureui.com/r/bulk-actions-01.json): 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. Install: `npx shadcn@latest add @sureui/bulk-actions-01`
- [@sureui/settings-save-bar-01](https://sureui.com/r/settings-save-bar-01.json): 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. Install: `npx shadcn@latest add @sureui/settings-save-bar-01`
- [@sureui/cancel-subscription-01](https://sureui.com/r/cancel-subscription-01.json): A plan card whose cancel dialog lists what goes away and when, offers a cheaper plan instead, and cancels on a second click. Install: `npx shadcn@latest add @sureui/cancel-subscription-01`

## Optional

- [Full docs](https://sureui.com/llms-full.txt): every page above in one file