shadcn.io is not affiliated with official shadcn/ui
Approval Workflow Timeline Block for React Aria
A purchase approval chain on a rail: five stages with approvers, clocks against each service level, and Approve as James W. or Request changes, which append an entry, move the current ring and can be undone.
Installation
Overview
Follow a request through its approvers with this approval workflow timeline for React with React Aria. It is written for Nodwise, a fictional purchase-approval tool, and shows request PR-2041 through five stages: Submitted, Manager, Legal, Finance and Final. Each stage has its approver's initials, name and role, a state as a glyph and a word, and a clock against its service level, worked out from typed times, such as 1 d 18 h of 2 d, drawn with a Progress meter that sits under the stage on a phone. You are James in Legal, so that stage reads Waiting on you. Approve as James W. is the one primary: it appends the entry to the Legal stage and moves the current ring to Finance. Request changes appends a return and sends the request back. Either says it was recorded in this demo and nothing was sent, and Undo takes it back. The request is example data.
FAQ
How do I change the stages?
Edit STAGES: each has an approver, a role, a service level in minutes and start and end times. Which stage is current, the clocks and the percentages come from stateOf() and the helpers beside it, so changing a time changes everything that depends on it.
What do the two buttons do?
Approve marks Legal done at the page's time and starts the Finance clock; Request changes puts Legal on hold and returns the request to the requester. One decision at a time; Undo clears it.
What stays local in the demo, and how do I wire it for real?
The decision is state in the page; nobody is notified. To wire it, call your approvals API from the two handlers and render the stages it returns.