approvals-ui
The approval workflow screen, as shadcn components.
The approval workflow screen every finance-ops product rebuilds, shipped as shadcn-style components you own: one command and the code lands in your project.
A registry, not a package
npx shadcn add and the workflow canvas, the plain-language edit panel, and the validation panel land in your codebase with their dependencies resolved, yours to edit. No black-box npm dependency for the screen your auditors will ask about.
The components model the real domain: quorum gates (2 of 3 approvers), amount thresholds, conditional routes, and a policy lint that knows what segregation of duties means and flags the graph that lets a requester approve their own spend.
Plain language in, reviewed diff out
Type "above $50k also require the CFO" and a proposal appears: 1 added, 1 changed, rendered on the canvas with the affected gates ringed. A human reviews the diff before anything lands, the same review-then-apply gate the ledgerloop onboarding uses.
The demo ships with a bundled deterministic parser, no model and no API key; in production you swap it for an LLM that emits the same validated EditOp JSON. The gate stays exactly the same.
Built on its own published foundation
The canvas lays out with react-flow-auto-layout, my npm package that fixes what a plain dagre pass gets wrong on variable-size nodes: true bounding-box centering and straightened linear edges. Strict TypeScript, dual ESM/CJS, published with provenance.
- shadcn registry
- React Flow
- react-flow-auto-layout