Warrant
Agent approval request card — springs up with a command or unified-diff preview and a low/medium/high risk badge, then collapses on a height spring into a one-line receipt. High-risk actions require press-and-hold (pointer or Space/Enter): an accent fill sweeps across Approve and drains back on release. Non-modal group semantics, Escape to deny, live-region outcome, stepped-opacity hold under reduced motion.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/warrantManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | The action the agent wants to take, e.g. "run_tests". Also appears in the receipt. | |
| description | string | Optional sentence explaining why the agent wants to do this. | |
| preview | WarrantPreview | Command or diff preview of the action. Omit for a text-only request. | |
| risk | WarrantRisk | "low" | Risk badge level; high requires press-and-hold to approve. |
| holdMs | number | 1200 | How long Approve must be held when risk="high", in ms. |
| onApprove | (always: boolean) => void | Fires when the request is approved, with the state of "Always allow this action". | |
| onDeny | () => void | Fires when the request is denied (Deny button, or Escape while focus is inside). | |
| status | WarrantStatus | Controlled status. Leave undefined to let the card track its own status. | |
| agentName | string | "Assistant" | Name of the requester in the header line. |
| accentColor | string | "#a78bfa" (ion violet) | Accent for the hold fill, Approve button, and focus rings. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.