Approval Card

Cards

About

A card an AI agent uses mid-task to ask the user to approve, reject, request changes, or answer a short set of questions.

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

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

export default function ApprovalCardReviewPreview() {
  return (
    <div className="relative h-[360px] w-full max-w-lg">
      <ApprovalCard
        title="Publish the component update?"
        description="The agent has prepared the release and is waiting for your decision."
        status="pending"
        onApprove={() => {}}
        onRequestChanges={() => {}}
        onReject={() => {}}
        result="Publishing was approved."
      >
        <dl className="grid gap-1 text-xs">
          <div className="flex items-center justify-between gap-4 py-1">
            <dt className="text-muted-foreground">Release</dt>
            <dd className="font-mono text-foreground/80">approval-card</dd>
          </div>
          <div className="flex items-center justify-between gap-4 py-1">
            <dt className="text-muted-foreground">Checks</dt>
            <dd className="text-foreground/80">4 passed</dd>
          </div>
          <div className="flex items-center justify-between gap-4 py-1">
            <dt className="text-muted-foreground">Visibility</dt>
            <dd className="text-foreground/80">Public registry</dd>
          </div>
        </dl>
      </ApprovalCard>
    </div>
  );
}