Approval Card

An AI assistant asking before it acts: what it wants to do, exactly what that means, and Approve or Deny.

$ pnpm dlx shadcn@latest add https://dashral.com/r/approval-card.json

Remind the customers who haven't paid yet.

Find unpaid invoices: Done
Find unpaid invoices3 invoices past due, $2,520 in all640ms

Needs your approval

Send 3 payment reminders

Each customer gets the friendly first reminder, with their invoice attached.

To: Northwind, Sagara Resorts, Kopi Senja
Template: First reminder
Total due: $2,520

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/approval-card.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/approval-card

Usage

example.tsx

1import { ApprovalCard } from "@/components/dashral/approval-card"
2
3<ApprovalCard
4  title="Send 3 payment reminders"
5  description="Emails the customers whose invoices are overdue."
6  details={[
7    { label: "To", value: "3 customers" },
8    { label: "Total due", value: "$1,240" },
9  ]}
10  onApprove={() => api.reminders.send()}
11  onDeny={() => api.reminders.cancel()}
12/>

Examples

Destructive, always allow, and decided

Red for what can't be undone, Allow once or Always allow, and the one-line decided states.

Needs your approval

Delete 214 archived customers

Their orders stay, but their names and emails are removed for good. This can't be undone.

Archived: Before January 1, 2025
Customers: 214

Needs your approval

Read your calendar

To find a time this week for the quarterly review with the team.

Export October's orders to CSV

Read your calendar

Refund order #5821

API reference

ApprovalCard

Also takes every prop of <section>(opens in a new tab).

Prop	Type	Default
`title`	`ReactNode` What the assistant wants to do, as an action. Required.	—
`description`	`ReactNode` Why, or what will happen.	—
`details`	`{ label, value }[] \| ReactNode` Exactly what it will do, as rows, or your own content.	—
`status`	`"pending" \| "approved" \| "always" \| "denied"` Controlled decision, e.g. from a saved conversation. Uncontrolled, it starts pending.	—
`onApprove`	`(scope: "once" \| "always") => void \| Promise` While its promise is pending, the button shows it's working.	—
`onDeny`	`() => void \| Promise`	—
`allowAlways`	`boolean` Offers Always allow beside Allow once.	`false`
`destructive`	`boolean` For what can't be undone: approving is red, with a warning sign.	`false`
`approveLabel / denyLabel`	`string` Your words on the buttons.	—
`result`	`ReactNode` Said on the decided line, e.g. "Reminders sent".	—
`icon`	`ReactNode` Replaces the shield (or the warning sign).	—
`classNames`	`{ details?, actions? }` Classes for the rows and the buttons' bar.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Tab`	Deny, Always allow, then Approve
`Enter`or`Space`	Choose

Accessibility

A section named by its title; the details are a description list, so each value is read with its label.
The decision is heard as it's made (a status region that's there from the start), and the keyboard stays on the card when the buttons go.
A working button is busy (aria-busy) and the others wait, so nothing is chosen twice.

Motion

A working button shows a spinner; nothing else moves.