Approval Flow React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Approval Flow is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import ApprovalFlow from @/components/ui/approval-flow.

import { useState } from "react"
import { ApprovalFlow, type ApprovalStep } from "@/components/ui/approval-flow"

const initialSteps: ApprovalStep[] = [
  {
    id: "sales",
    name: "Sales manager",
    approvers: [{ id: "u-ryan", name: "Ryan Martin", role: "Sales", decision: "approved", decidedAt: "2026-09-22T14:05:00" }],
  },
  {
    id: "finance",
    name: "Finance director",
    description: "required over $10,000",
    dueAt: "2026-09-24T12:00:00",
    approvers: [{ id: "u-jessica", name: "Jessica Dunn", role: "Accounting" }],
  },
  { id: "ceo", name: "CEO", approvers: [{ id: "u-liam", name: "Liam Brooks", role: "Owner" }] },
]

export function DiscountApproval() {
  const [steps, setSteps] = useState(initialSteps)
  return (
    <ApprovalFlow
      title="15% discount · Keystone Construction"
      requester={{ name: "Michael Hayes" }}
      submittedAt="2026-09-22T11:20:00"
      amount={103400}
      currency="USD"
      currentUserId="u-jessica"
      steps={steps}
      labels={{ approve: "Approve", reject: "Decline", requestChanges: "Ask for changes" }}
      onDecision={async ({ stepId, decision, comment }) => {
        await fetch("/api/approvals", { method: "POST", body: JSON.stringify({ stepId, decision, comment }) })
        setSteps((prev) =>
          prev.map((step) =>
            step.id !== stepId
              ? step
              : {
                  ...step,
                  approvers: step.approvers.map((a) =>
                    a.id === "u-jessica" ? { ...a, decision, comment, decidedAt: new Date() } : a,
                  ),
                },
          ),
        )
      }}
    />
  )
}

Props

• steps*
  ApprovalStep[]

  The chain in order: { id, name, description?, rule?: "any" | "all", approvers, dueAt?, skipped? }. Each approver is { id, name, avatar?, role?, decision?, decidedAt?, comment? (mention markup), delegatedFrom? }. The status of each step and of the request is derived from the decisions.

• titledefault ""
  ReactNode

  The request, e.g. "15% discount · Keystone Construction". Without it the section is named by labels.title for screen readers. The demo shows a sample while the field is empty.

• requester
  { name: string; avatar?: string }

  Who asked, shown with a small avatar in the meta line under the title.

• submittedAt
  TimeInput

  When it was submitted: a relative time in the meta line, the full date on hover.

• amountdefault 0
  number

  The money the request is about, in major units, formatted with formatPrice in the meta line. 0 hides it (the demo then shows its sample amount).

• currencydefault "USD"
  string

  ISO 4217 code for the amount.

• statusdefault ""
  "draft" | "pending" | "approved" | "rejected" | "changes-requested" | "cancelled" | ""

  Overrides the status derived from the steps. Draft and cancelled only exist this way; any status other than pending hides the action bar and the active step ring.

• currentUserIddefault ""
  string

  The person looking. When they are a pending approver of the active step the action bar shows and their row gets a You badge; anyone else sees who the request waits for. The demo's "View as" switch sets it while this field is empty.

• onDecision
  (input: ApprovalDecisionInput) => (void | Promise<unknown>)

  Runs on Approve, Reject and Request changes with { stepId, decision: "approved" | "rejected" | "changes-requested", comment (markup), mentions (ids) }. A promise keeps the pressed button busy; a rejection shows its message under the buttons (or in the reject dialog).

• requireRejectCommentdefault true
  boolean

  Reject opens a dialog (a sheet on phones) that needs a reason. false rejects at once with the comment as it is.

• allowRequestChangesdefault true
  boolean

  Shows the third action, Request changes, which sends the request back without rejecting it.

• onRemind
  (approver: ApprovalApprover, step: ApprovalStep) => (void | Promise<unknown>)

  Adds a Send a reminder button to the pending approvers of the active step (amber once the step is overdue). A promise spins it; success turns it into Reminder sent and announces it.

• people
  MentionItem[]

  The colleagues @ can mention in the comment box (MentionInput). Without it the comment box is a plain Textarea.

• history
  ApprovalHistoryEntry[]

  The events: { id, at, actor: { name, avatar? }, type: submitted | approved | rejected | changes-requested | comment | reminder | resubmitted | cancelled, comment?, stepId? }, shown as a feed timeline under a History (n) toggle.

• showHistorydefault true
  boolean

  Shows the History toggle when there is history.

• historyDefaultOpendefault false
  boolean

  Starts with the history open.

• defaultOpendefault false
  boolean

  Starts with the overlay open: the reject dialog in the full variant (when the viewer can decide), the details popover in compact. Control it with open and onOpenChange.

• open
  boolean

  Controlled overlay state (reject dialog or compact popover); pair it with onOpenChange.

• onOpenChange
  (open: boolean) => void

  Runs when the reject dialog or the compact popover opens or closes.

• orientationdefault "vertical"
  "vertical" | "horizontal"

  horizontal lays the steps in a row with an avatar group under each, for page and invoice headers. Below 512px of width it stacks vertically anyway.

• variantdefault "full"
  "full" | "compact"

  compact renders only the summary (stacked avatars with status rings, 2 of 3 approvals, the status badge) as a button that opens the full flow in a popover, a bottom sheet on phones. For table rows and cards.

• sizedefault "md"
  "sm" | "md"

  sm tightens the panel, the markers (24px), the avatars and the text for side panels.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The active step's ring, the your-turn bar and the Approve button. Decisions keep their status colors: green approved, red rejected, blue changes requested, amber waiting.

• colordefault ""
  string

  Any CSS color; replaces the tone for the active ring, the bar and the Approve button.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg"

  Corner of the panel: 0, 12, 16 or 24px.

• surfacedefault true
  boolean

  The raised panel look. false drops the background, shadow and padding for a flow inside a card of your own.

• maxAvatarsdefault 4
  number

  Compact: avatars before the +N chip.

• now
  Date | number

  The moment relative times and overdue checks count from. Defaults to the live clock (useNow); demos pin 24.09.2026 16:40.

• localedefault ""
  string

  Locale for money, dates and relative times. Empty uses the UIProvider locale, then the browser's.

• labels
  ApprovalFlowLabelsInput (a deep Partial<ApprovalFlowLabels>)

  Every string, English by default (DEFAULT_APPROVAL_FLOW_LABELS): title, statuses, decisions, stepStatuses, events, any, all, due(date), overdue(date), approve, reject, requestChanges, comment, cancel, rejectTitle, rejectDescription, rejectReason, rejectReasonPlaceholder, rejectReasonRequired, mentionPeople, mentionEmpty, remind, reminderSent, reminded(name), remindError, yourTurn, waitingFor(names), progress(approved, required), history(count, formatted), submitted, skipped, delegated(from), you, decided(decision), decisionError.

• classNames
  Partial<Record<"header" | "title" | "meta" | "status" | "steps" | "step" | "marker" | "connector" | "stepName" | "rule" | "due" | "approver" | "comment" | "remind" | "actions" | "history" | "summary", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root section (the summary button in compact), merged last.

Parts

FAQ

More React data display components