Approval Card

A review card for approving an AI agent's proposed action — simple approve/reject or a short question flow.

Questions

Multi-step questions with checkboxes, radios, progress dots, and optional custom input.

Loading…

Installation

CLI

npx @sonojs/ui@latest add approval-card

Also needsnpx @sonojs/ui@latest add agent-disclosure button checkbox && npm i lucide-react motion

Usage

approval-card.tsx

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

export function Example() {
  return (
    <ApprovalCard
      title="Deploy schema migration"
      description="Apply the pending change to production."
      onApprove={() => {}}
      onReject={() => {}}
      onRequestChanges={() => {}}
    />
  )
}

Props

Prop	Type	Default	Description
title	ReactNode	"Approval required"	Header title (rolls when questions change).
description	ReactNode	—	Body copy for simple (non-question) mode.
status	ApprovalCardStatus	"pending"	`pending` \| `submitting` \| `approved` \| `rejected` \| `changes-requested` \| `answered`.
questions	ApprovalCardQuestion[]	[]	When set, switches to the stepped question flow.
onApprove / onReject / onRequestChanges	() => void	—	Simple-mode action handlers.
onSubmit	(answers) => void	—	Called when the last question is submitted.
result	ReactNode	—	Settled-state summary under the header.
className	string	—	Merge classes on the card root.