# Docs Approval Flow

Internal policy that moves from draft to legal and security review before being published.

- id: `docs-approval-flow`
- Page: https://agentic-ui-kit.com/components/docs-approval-flow
- Live preview: https://agentic-ui-kit.com/live/component/docs-approval-flow

## Install

```bash
agentic-ui add docs-approval-flow
npx shadcn@4.17.0 add @agentic-ui/docs-approval-flow
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** approval-state-machine, draft-review-approved-stages, reviewer-assignment, required-approval-gating, blocking-comment-gating, threaded-review-comments, comment-resolution, change-request-round-trip, audit-trail, read-only-history, empty-state, error-state, dark-mode
- **Intents:** execute-flow, track-status, communicate, audit-trail
- **Suits domains:** knowledge, project-management, operations, saas, hr
- **Interaction:** submit-for-review, record-approval, request-changes, resubmit, add-comment, reply-to-comment, resolve-comment, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Internal policy that moves from draft to legal and security review before being published, Technical proposal (RFC) that requires approval from two leads and resolution of blocking comments, Contract or addendum circulated among owners with comments anchored to sections, Operating procedure resubmitted for review after a round of requested changes
- **Avoid when:** Immediate publishing with no reviewers or signature, where the only state is published, Legally binding electronic signature with signer order (use docs-esignature-flow), Line-by-line code review with a diff (use code-diff-viewer)
- **Preserve when adapting:** state-machine-contract, approval-gating-rules, audit-trail-model, keyboard-accessibility-model
- **Replace when adapting:** domain-copy, reviewer-directory, notification-handlers, persistence-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, textarea, progress, avatar
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0