Approval Card

ProNew

A confirmation card for an agent action that shows what will run, its risk level and the exact command, with Approve, Deny and an optional countdown.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/approval-card

Prop	Type	Default	Description
`title`	`string`	-	What the agent wants to do.
`description`	`string`	-	Why it wants to do it.
`risk`	`"low" \| "medium" \| "high"`	`"medium"`	Sets the accent color, icon and wording.
`details`	`{ label: string; value: string }[]`	-	Label and value rows under the description.
`preview`	`ReactNode`	-	The exact command, diff or request body.
`previewLabel`	`string`	`"Exactly what will run"`	Accessible name of the preview box.
`status`	`"pending" \| "approved" \| "denied" \| "expired"`	-	Current status (controlled). Without it the card tracks its own.
`onApprove`	`() => void`	-	Called when Approve is pressed.
`onDeny`	`() => void`	-	Called when Deny is pressed.
`onAlwaysAllow`	`() => void`	-	Adds a third button that approves and asks not to be asked again.
`alwaysAllowLabel`	`string`	`"Always allow"`	Text of that button.
`expiresIn`	`number`	-	Seconds until the request denies itself. Shows a countdown.
`onExpire`	`() => void`	-	Called when the countdown reaches zero.
`resolvedNote`	`string`	-	Text after the decision, such as "by you at 10:42".
`approveLabel`	`string`	`"Approve"`	Approve button text.
`denyLabel`	`string`	`"Deny"`	Deny button text.

Also accepts all <section> props except title.

The risk level is written in words, not shown by color alone.
After a decision the buttons are replaced by a status message and focus moves to it.
The preview box becomes a tab stop only when its content overflows.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/approval-card

Prop	Type	Default	Description
`title`	`string`	-	What the agent wants to do.
`description`	`string`	-	Why it wants to do it.
`risk`	`"low" \| "medium" \| "high"`	`"medium"`	Sets the accent color, icon and wording.
`details`	`{ label: string; value: string }[]`	-	Label and value rows under the description.
`preview`	`ReactNode`	-	The exact command, diff or request body.
`previewLabel`	`string`	`"Exactly what will run"`	Accessible name of the preview box.
`status`	`"pending" \| "approved" \| "denied" \| "expired"`	-	Current status (controlled). Without it the card tracks its own.
`onApprove`	`() => void`	-	Called when Approve is pressed.
`onDeny`	`() => void`	-	Called when Deny is pressed.
`onAlwaysAllow`	`() => void`	-	Adds a third button that approves and asks not to be asked again.
`alwaysAllowLabel`	`string`	`"Always allow"`	Text of that button.
`expiresIn`	`number`	-	Seconds until the request denies itself. Shows a countdown.
`onExpire`	`() => void`	-	Called when the countdown reaches zero.
`resolvedNote`	`string`	-	Text after the decision, such as "by you at 10:42".
`approveLabel`	`string`	`"Approve"`	Approve button text.
`denyLabel`	`string`	`"Deny"`	Deny button text.

Also accepts all <section> props except title.

The risk level is written in words, not shown by color alone.
After a decision the buttons are replaced by a status message and focus moves to it.
The preview box becomes a tab stop only when its content overflows.