shadcn.io is not affiliated with official shadcn/ui
Compact Inline Stepper Block for React Aria
A one-line stepper for a report-pack builder: Back, a menu button that reads Step 2 of 5 and jumps to any reached step, and Next, over a small panel with the step's field.
Installation
Overview
Keep a multi-step form to one line of chrome with this compact inline stepper for React with React Aria. A toolbar band holds an outline Back button, a Dropdown Menu button that reads "Step 2 of 5: Scope" and lists the steps you have reached so you can jump to one, and the block's one Shine Button, Next. A thin five-part bar from Steps sits under it and a small panel holds the step's field: a cover title (Input), the sites to cover (Select), a count of findings (Number Input), a photo-log switch (Switch) and a read-back of the pack. The page count is worked out from the findings and the appendix. The last press builds the pack in this demo. On a phone the menu label truncates and the buttons keep their size. For report builders, export dialogs and any form that should not take a page of progress chrome.
FAQ
What does the menu list?
All five steps, with the ones you have not reached yet disabled. Choosing one jumps to it and moves focus to its heading. Back and Next move one step; the bar under the toolbar is a second way to the same steps.
How is the page count worked out?
A cover page, one page for every two findings (rounded up) and four pages for the photo log when the switch is on. It is a small helper at the top of the file, so replace it with your own layout rules.
How do I add a step?
Add it to STAGES, add a StepsContent with the same index and its field, and the bar, the menu and the count follow. Keep the pane heights close so the panel does not jump.
What stays local?
The title, scope, count and switch live in component state and nothing is built, exported or sent. In an app, call your export from the Build pack press and keep the state in your form library.