Approval Card

The agent asks before it acts. Shows what will happen and how risky it is, then lets the person approve, deny or edit first.

Base UI React Aria Radix UI

Send Acme their October invoice, refund Northwind for the double charge, and move Globex to longer terms.

I have three actions ready. Each one needs your go ahead first.

Send invoice INV-1042 to AcmeLow risk

October retainer, matches the signed scope.

To: billing@acme.co
Amount: $4,800.00 CAD
Due: Nov 9, 2026

Always allow this action

Refund $1,250.00 to NorthwindHigh risk

Card was charged twice for invoice INV-1031 on Oct 2.

Method: Visa ending 4417
Amount: $1,250.00 CAD
Arrives: 5 to 10 business days

1:30 left

Change Globex payment termsMedium risk

They asked for longer terms on the Oct 6 call.

Terms: ~~Net 30~~ Net 45
Late fee: 1.5% a month
Applies to: Invoices sent after today

Always allow this action

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/approval-card.json

Usage

import { ApprovalCard } from "@/components/ui/approval-card"

<ApprovalCard
  icon={CurrencyDollarIcon}
  title="Refund $1,250.00 to Northwind"
  reason="Card was charged twice for invoice INV-1031."
  risk="high"
  expiresIn={90}
  details={[
    { label: "Method", value: "Visa ending 4417" },
    { label: "Amount", value: "$1,250.00 CAD" },
  ]}
  onApprove={({ always }) => runTool(always)}
  onDeny={({ expired }) => cancelTool(expired)}
/>

Parts

Header. The action icon, the title, a risk badge and a one line reason. A high risk card tints its icon and plays a warning cue when it appears.
Details. Pass details as label and value pairs to show exactly what will happen. Put anything richer, such as an email body or a diff, in children.
Edit. Pass editable, a function that returns fields, and an Edit button appears. The countdown pauses while editing.
Footer. Deny, Edit and Approve, with an optional "Always allow this action" checkbox. Cmd or Ctrl Enter approves and Escape denies while focus is inside the card.
Countdown. Pass expiresIn in seconds and a bar drains toward zero. When it runs out the request is denied and onDeny gets expired: true.
Receipt. Once decided the card folds into one line, "Approved by you at 2:41 PM". A denial can be undone for five seconds.

Props

Prop	Type	Default
`title`	`ReactNode`
`reason`	`ReactNode`
`icon`	`ElementType`	`ShieldWarningIcon`
`risk`	`"low" \| "medium" \| "high"`	`"low"`
`details`	`{ label, value }[]`
`editable`	`(close) => ReactNode`
`expiresIn`	`number`
`allowAlways`	`boolean`	`true`
`actor`	`string`	`"you"`
`onApprove`	`({ always }) => void`
`onDeny`	`({ expired }) => void`
`onUndo`	`() => void`

Amount Aspect Ratio

On This Page

Installation Usage Parts Props