Approval Card

AI chats

About

A human-in-the-loop decision card that keeps risk, evidence and impact explicit before an agent acts: approve or reject, with typed confirmation for critical actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Approval Card to your project and fits it to your theme.

Code

How Approval Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import {
  ApprovalCard,
  ApprovalCardActions,
  ApprovalCardApprove,
  ApprovalCardDetail,
  ApprovalCardDetails,
  ApprovalCardHeader,
  ApprovalCardReject,
  type ApprovalCardStatus,
  type ApprovalDecision,
} from "@/components/ui/approval-card";

type DemoState =
  | { status: Exclude<ApprovalCardStatus, "submitting" | "error"> }
  | { status: "submitting"; pendingDecision: ApprovalDecision };

export default function ApprovalCardDemo() {
  const [state, setState] = useState<DemoState>({ status: "ready" });
  const timer = useRef<number | null>(null);

  useEffect(() => () => {
    if (timer.current) window.clearTimeout(timer.current);
  }, []);

  const decide = (decision: ApprovalDecision) => {
    setState({ status: "submitting", pendingDecision: decision });
    timer.current = window.setTimeout(() => setState({ status: decision }), 900);
  };

  return (
    <div className="flex min-h-[460px] w-full items-center justify-center p-6">
      <div className="grid w-full max-w-[560px] gap-3">
        <ApprovalCard {...state} risk="high" variant="detailed">
          <ApprovalCardHeader
            title="Deploy the generated refund policy?"
            description="This changes how new customer refunds are routed."
          />
          <ApprovalCardDetails>
            <ApprovalCardDetail label="Requested by">Operations agent · Refund triage</ApprovalCardDetail>
            <ApprovalCardDetail label="Affected resources">refund-policy-v4 · 3 queues</ApprovalCardDetail>
            <ApprovalCardDetail label="Proposed changes">
              <ul>
                <li>Route refunds over $500 to review</li>
                <li>Notify the operations lead</li>
              </ul>
            </ApprovalCardDetail>
            <ApprovalCardDetail label="Supporting evidence">
              A 14-day replay matched 98.6% of prior decisions.
            </ApprovalCardDetail>
            <ApprovalCardDetail label="Downstream impact" className="sm:col-span-2">
              New refund requests begin using this policy immediately after approval.
            </ApprovalCardDetail>
          </ApprovalCardDetails>
          <ApprovalCardActions>
            <ApprovalCardReject onClick={() => decide("rejected")} />
            <ApprovalCardApprove onClick={() => decide("approved")}>Deploy policy</ApprovalCardApprove>
          </ApprovalCardActions>
        </ApprovalCard>
        {state.status === "approved" || state.status === "rejected" ? (
          <button
            type="button"
            onClick={() => setState({ status: "ready" })}
            className="justify-self-center rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
          >
            Reset demo
          </button>
        ) : null}
      </div>
    </div>
  );
}