Approval Card

AI chats 12

About

A human-in-the-loop decision surface for questions, review steps, and consequential 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

import { useState } from 'react'
import ApprovalCard from '@/components/ui/approval-card'

export default function Demo() {
  const [status, setStatus] = useState<'approved' | 'denied' | 'pending'>('pending')

  return (
    <ApprovalCard
      className="w-full max-w-lg"
      description="The agent will publish 14 locally authored components to the public registry."
      onDecision={(decision) => setStatus(decision === 'approve' ? 'approved' : 'denied')}
      status={status}
      title="Publish this release?"
    />
  )
}