AI & AgentsPro

Approval Card

The human-in-the-loop gate: what the agent wants to do, how risky it is, approve or reject.

Usage

Send 14 payment reminders

Medium risk

Emails the contact on every invoice more than 30 days overdue. Nothing is charged.

2 min ago

Installation

bash

npm install @wunderui/react

Then import what you need:

tsx

import { ApprovalCard } from "@wunderui/react"

Examples

Inline, low risk

The default: what will run sits behind a disclosure.

Publish the changelog entry

Low risk

Pushes the 0.2.0 notes to the docs site. Nothing else changes.

2 min ago

Dialog with a diff

kind="dialog-diff" shows the edit directly and offers Allow once, Always allow or Reject.

Apply 1 file edit

Medium risk

Switch TabsList to roving focus so arrow keys move between tabs.

2 min ago

return <div role="tablist" {...props} />

const ref = useRovingFocus()

return (

<div ref={ref} role="tablist" {...props} />

)

Permission request in an approval

An Approval Card of kind permission: the scopes and their countdown live in a ScopeList.

Access the WunderUI repository

Medium risk

Needed to sync tokens from Figma and open a pull request.

2 min ago

Requested access

Expires in

Read the docs siteapps/docs · 412 files
Write tokenspackages/react/src/styles.css
Open a pull requestKl-webmedia/wunderui · branch tokens-sync

High cost

kind="high-cost" adds an amber banner with the estimate and the budget, and a cheaper alternative.

Render 1,240 screenshots

High risk

This run renders every block in light, dark and mobile before the release.

2 min ago

Estimated $18.40 · run budget $10.00

About 3× the usual release run. Rendering 400 screenshots stays within budget.

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Budget & recovery

Spend, a failed run and an approval request side by side.

Spend today

$10 budget

$8.60

86% usedNearly spent

Rate limit exceeded.

Failed at Draft the follow-up email· Attempt 2 of 3

Send 12 emails

High risk

Templated follow-up to at-risk customers.

1 min ago

API Reference

Prop	Type	Default
title	ReactNode	—
summary	ReactNode	—
preview	ReactNode	—
risk	"low" \| "medium" \| "high"	"medium"
requestedAt	ReactNode	—
expiresAt	Date \| string \| number	—
state	"pending" \| "approved" \| "rejected" \| "expired"	uncontrolled
kind	"inline" \| "dialog-diff" \| "permission" \| "high-cost"	"inline"
cost	{ estimate: ReactNode; budget?: ReactNode; note?: ReactNode }	—
approveLabel / rejectLabel	string	per kind
secondaryAction	{ label: string; onClick?: () => void }	—
onApprove / onReject / onEdit	() => void	—

PreviousAgent Status NextArtifact Panel