Confirmation
An agent asking permission, with press-and-hold for risky actions.
Confirmation is the permission prompt for agent actions: sending email, spending money, running commands. The exact action is shown verbatim, high-risk actions must be held to approve so they can't be clicked through by reflex, and the decision collapses to a one-line receipt.
Preview
Send the weekly report to 24 recipients?
The agent drafted the email from this week's dashboard.
Run a command in production
This deletes rows and cannot be undone.
psql $DATABASE_URL -c "delete from sessions where expires_at < now()"
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/confirmation.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/confirmation.
Builds on: button, hold-to-confirm, motion
Usage
import { Confirmation } from "@/components/ui/confirmation";
<Confirmation risk="high" title="Delete 214 rows" command={sql} onApprove={run} />Motion
Rises in; resolves to a compact receipt.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Confirmation
| Prop | Type | Default | Description |
|---|---|---|---|
| title · description | ReactNode | — | What and why. |
| command | string | — | Shown verbatim. |
| risk | "low" | "high" | "low" | High requires hold. |
| onApprove · onDeny | () => void | — | Decision callbacks. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: ai permission prompt · agent tool approval · human in the loop confirmation · approve deny component · shadcn ai confirmation