shadcn.io is not affiliated with official shadcn/ui
Floating Overlay Stepper Block for Vue
A drawn supplier agreement with a pill toolbar floating over its foot: Back, four dots, the step's name and Next, ringing one region of the page at a time, with a chip that says what to check and a flag toggle, and a Minimise button.
Installation
Overview
Walk someone through a document one region at a time, with this floating stepper for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a drawn contract page with four regions (Parties, Terms, Risks and Sign-off) and, floating over its foot, a pill toolbar from Clausely, a contract review tool: a ghost Back button, a Steps line of four dots, the current region's name, the block's one Shine Button and a Minimise button. Each step rings its region on the page and a chip above the toolbar says what to check there, with a Toggle that flags the clause for follow-up; passed regions get a tick and flagged ones a flag. Minimise folds the bar down to a "Step 2 of 4" chip and Expand brings it back. The last Next reads Finish review and ends on a count of flagged clauses; a status line under the frame says where you are. On a phone the toolbar spans the frame's foot. For contract review, document sign-off and any guided pass over a long page.
FAQ
Why is it not a dialog?
Because the page behind it stays in use. The toolbar is plain markup floating over a frame: nothing is trapped, hidden or made inert, Tab leaves it at both ends, and it is always there until you minimise it. Use a Dialog when the person must answer before going on; use this when the steps are a guide laid over what they are already looking at.
How do I change the steps and the page?
CLAUSES lists the four steps with their id, title and the sentence in the chip. The drawn page is ContractPage, one Region per clause in the same order, so a new step needs an entry in CLAUSES and nothing else; the dots, the chip and the ringed region all follow. Replace the drawing with your own page and ring a region by position or by an id on a real element.
What does Minimise do to focus and to the steps?
It hides the toolbar's Back, dots, name and Next and shows a "Step 2 of 4" chip beside the same button, which now reads Expand. The steps, the flags and the current region are kept, and focus stays on the button. While minimised the chip above the toolbar is hidden too, so the page shows just the ringed region.
What stays local, and how do I make it real?
Everything. The flags live in component state and Finish review ends on "Review finished in this demo": nothing is signed or sent. In your app send the flagged ids from the Next handler on the last step to your server and show its answer in the final chip.
How does the keyboard work?
The dots are one tab stop on the current step: arrow keys move between the steps you have reached and Enter or Space opens one. Back, Next, the flag toggle and Minimise are ordinary buttons in reading order. After a move, focus goes to the chip's title and a polite line under the frame reads "Step 3 of 4: Risks"; nothing takes focus on load.