approvals-ui

The approval workflow screen, as components you own.

React Flow gives you the canvas. This registry adds the approval semantics: quorum gates, amount thresholds, unassigned seats, a policy lint that knows what segregation of duties means, and plain-language editing where a human reviews the diff before anything lands. Install with one command, the code lands in your project, it is yours.

npx shadcn@latest add https://approvals-ui.vercel.app/r/workflow-canvas.json
Procurement approvals
Live demo. Try an edit on the right.

This demo uses the bundled deterministic parser, no model and no API key. In production you swap it for an LLM that emits EditOp JSON (validated by editOpSchema). The review-then-apply gate stays exactly the same.

Install

Each item is copied into your codebase by the shadcn CLI, with its npm dependencies and its registry dependencies resolved. Start with workflow-canvas, it pulls everything it needs.

workflow-canvas
The whole screen in one component: policy JSON in, laid-out graph out. Pulls the nodes and the core with it.
npx shadcn@latest add https://approvals-ui.vercel.app/r/workflow-canvas.json
nl-edit-panel
Plain-language edits behind a human gate: propose, review the diff on the canvas, apply or discard.
npx shadcn@latest add https://approvals-ui.vercel.app/r/nl-edit-panel.json
validation-panel
The policy lint, rendered: structural errors and best-practice warnings, click to focus the step.
npx shadcn@latest add https://approvals-ui.vercel.app/r/validation-panel.json
approval-node
The gate card: approvers, unassigned seats, quorum badge, condition pill, SLA, diff and issue rings.
npx shadcn@latest add https://approvals-ui.vercel.app/r/approval-node.json
terminal-node
Approved and rejected outcome pills.
npx shadcn@latest add https://approvals-ui.vercel.app/r/terminal-node.json
approvals-core
Headless core only: Zod policy schema, validation rules, step diff, deterministic edit ops.
npx shadcn@latest add https://approvals-ui.vercel.app/r/approvals-core.json