Components

Approval Card

Pro

The permission prompt an agent shows before a risky action: a risk badge and mono command, Allow with a countdown ring that pauses while you hover, Deny that shakes the card, then the whole thing folds into a one-line receipt.

Make the dashboard load faster

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/approval-card

Unlock with Planes Pro

$99 once · 80 Pro components · lifetime updates.

I have a licenseGet Pro
<ApprovalCard
  title="Run command"
  description="Rebuild before running the tests."
  command="rm -rf dist && pnpm build"
  risk="high"
  onDecide={(decision) => respond(decision)}
/>

Examples

Gate a tool call

Render the tool row in its pending state with the card beneath it, then flip the row to running once the user allows. Deny ends the row in error.

<ToolCallCard name="bash" args={{ command }} status={status} error={denyReason} />
{status === "pending" && (
  <ApprovalCard
    title="Run command"
    command={command}
    risk="medium"
    onDecide={(d) => (d === "deny" ? setDenied(true) : resume(d))}
  />
)}

Edit requests carry the diff

Put an InlineDiff in the children slot so the user approves what they can see, not a file path.

<ApprovalCard title="Edit page.tsx" risk="low" allowLabel="Apply" onDecide={respond}>
  <InlineDiff fileName="page.tsx" before={before} after={after} showActions={false} />
</ApprovalCard>

Auto-approve the routine ones

Low-risk actions can carry a short timer. Hovering the card pauses it, so nobody gets approved past while reading.

<ApprovalCard
  title="Read file"
  command="cat src/lib/utils.ts"
  risk="low"
  allowAlways={false}
  autoApproveIn={5}
  onDecide={respond}
/>

Keep the prompt on screen

For audit views, leave the request visible and let the receipt append underneath.

<ApprovalCard
  title="Delete branch"
  command="git push origin --delete feature/old"
  risk="high"
  collapseOnDecide={false}
  decision={record.decision}
/>

Use cases

  • Coding agents

    Gate shell commands, file writes, and git pushes the way Claude Code and Cursor do, inline in the transcript.

  • Browser and computer-use agents

    Confirm a purchase, a form submit, or a sent email before the agent clicks.

  • Workflow automations

    A human-in-the-loop step between two automated ones, with a timer for approvals that are usually fine.

  • Admin and ops tools

    Any destructive action a bot proposes, with the risk level set from your own policy engine.