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 { useState } from "react";
import {
  ApprovalCard,
  ApprovalCardActions,
  ApprovalCardApprove,
  ApprovalCardConfirmation,
  ApprovalCardDetail,
  ApprovalCardDetails,
  ApprovalCardHeader,
  ApprovalCardReject,
  type ApprovalCardStatus,
} from "@/components/ui/approval-card";

export default function ApprovalCardCriticalDemo() {
  const [status, setStatus] = useState<Exclude<ApprovalCardStatus, "submitting" | "error">>("ready");
  return (
    <div className="flex min-h-[520px] w-full items-center justify-center p-6">
      <div className="w-full max-w-[560px]">
        <ApprovalCard status={status} risk="critical" variant="detailed" confirmation={{ phrase: "support-search-prod" }}>
          <ApprovalCardHeader
            title="Delete the production search index?"
            description="This removes the index and every replica. It cannot be undone."
          />
          <ApprovalCardDetails>
            <ApprovalCardDetail label="Affected resources">support-search-prod · 8.2M indexed records</ApprovalCardDetail>
            <ApprovalCardDetail label="Supporting evidence">No restorable snapshot exists.</ApprovalCardDetail>
          </ApprovalCardDetails>
          <ApprovalCardConfirmation />
          <ApprovalCardActions>
            <ApprovalCardReject onClick={() => setStatus("rejected")} />
            <ApprovalCardApprove onClick={() => setStatus("approved")}>Delete index</ApprovalCardApprove>
          </ApprovalCardActions>
        </ApprovalCard>
      </div>
    </div>
  );
}