---
name: "@approvals-ui"
slug: "approvals-ui"
description: "Approval workflow components for React Flow: quorum gates, amount thresholds, a policy lint (segregation of duties, single approver on high value), and plain-language editing behind a human review gate."
category: "Forms"
tags: ["forms", "retro"]
framework: "react"
license: "MIT"
author: "DylanMerigaud"
website: "https://approvals-ui.vercel.app"
github: "https://github.com/DylanMerigaud/approvals-ui"
registry: "https://approvals-ui.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 8
component_count: 6
generated_at: "2026-07-28T08:59:05.895Z"
---

# @approvals-ui

Approval workflow components for React Flow: quorum gates, amount thresholds, a policy lint (segregation of duties, single approver on high value), and plain-language editing behind a human review gate.

## Links

- Website: https://approvals-ui.vercel.app
- GitHub: https://github.com/DylanMerigaud/approvals-ui
- Registry JSON: https://approvals-ui.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/approvals-ui
- This file: https://sh4dcn.vercel.app/md/approvals-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://approvals-ui.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://approvals-ui.vercel.app/r/registry.json
bunx shadcn@latest add https://approvals-ui.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/DylanMerigaud/approvals-ui.git
# fetch the raw registry index
curl -s https://approvals-ui.vercel.app/r/registry.json
```

## Components (6)

| name | type | description | install |
| --- | --- | --- | --- |
| approvals-core | registry:lib | Headless core for approval policies: Zod schema (gates, quorums, conditions, SLAs), a policy lint with structural errors and best-practice warnings, a step-lev… | `npx shadcn@latest add https://approvals-ui.vercel.app/r/approvals-core.json` |
| approval-node | registry:component | The approval gate card for React Flow: approvers with unassigned seats, quorum badge, condition pill, SLA badge, plus diff, validation, and live-status rings. | `npx shadcn@latest add https://approvals-ui.vercel.app/r/approval-node.json` |
| terminal-node | registry:component | Approved and rejected outcome pills for React Flow. | `npx shadcn@latest add https://approvals-ui.vercel.app/r/terminal-node.json` |
| workflow-canvas | registry:component | Renders an ApprovalPolicy as a laid-out React Flow graph: automatic layout on real node sizes (react-flow-auto-layout), aligned step edges, diff and status ove… | `npx shadcn@latest add https://approvals-ui.vercel.app/r/workflow-canvas.json` |
| validation-panel | registry:component | Lists policy issues with severities: structural errors that should block activation and best-practice warnings (segregation of duties, single approver on high … | `npx shadcn@latest add https://approvals-ui.vercel.app/r/validation-panel.json` |
| nl-edit-panel | registry:component | Edit the policy in plain English behind a human gate: a proposer (your LLM, or the bundled deterministic demo parser) returns a proposed policy plus its diff, … | `npx shadcn@latest add https://approvals-ui.vercel.app/r/nl-edit-panel.json` |

## For AI agents

```text
You are adding components from @approvals-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/approvals-ui.md) for the component list.
2. Fetch the machine-readable index: https://approvals-ui.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: approvals-ui).
```