shadcn.io is not affiliated with official shadcn/ui
Approval Workflow Onboarding Block for React
A spend-approval step as a whole screen: three stages on a rail, two amounts that must climb, an auto-approve switch, and a ruler drawn to scale that redraws with one sentence on who approves what.
Installation
Overview
Set up who signs off on spending, with this approvals step for React with Base UI. It is a whole screen of Ledgerwold, a spend-management tool: the page's rails and one band, a step header ("Step 4 of 6" and a hairline), and a framed panel with three stages joined by a rail. Manager takes an "up to" amount (Number Input) and an Approve automatically Switch, Finance takes a larger amount, and Executive is everything above. Under them a ruler is drawn to scale with three segments whose widths follow the two amounts, and one sentence reads it back: "Up to $1,000 is approved automatically; up to $5,000 needs Finance; above that, an executive." The one Shine Button is Turn on, with a ghost Skip for now.
FAQ
What does it check, and when does it say so?
Each amount must be a whole number from $1 to $1,000,000, and the Finance amount must be above the Manager's. A problem shows as a sentence under its stage once you leave the box, or for both when you press Turn on; the first one takes focus. While an amount is wrong the ruler and the sentence keep the last good amounts, so they never show something that is not allowed.
How is the ruler drawn to scale?
The first two segments share 80% of the bar in proportion to the amounts, and the Executive segment always takes the last 20%, so there is room to show "above". Widths are set with a CSS variable and move with a short transition (none with reduced motion). The bar is drawn left to right even on a right-to-left page, and the two amounts under it sit on separate lines so they never overlap.
What does Approve automatically change?
With it on, requests up to the Manager amount need nobody and the first segment reads Automatic; with it off they need a manager, and the sentence and the segment's label say so. The switch is a plain toggle in the foreground colour, named "Approve automatically".
How do the number boxes behave?
They take whole numbers only; a wrong value can be corrected by typing, because nothing changes under you. The ruler moves as you type. Arabic-Indic digits typed on a right-to-left page are read as ordinary digits.
What stays local in the demo, and how do I wire it?
Everything: Turn on and Skip for now only say so ("Turned on in this demo."). In your app send the two amounts and the switch from turnOn once there are no problems, and load saved values into START. The stage names are fixed text; make them your own roles.