shadcn.io is not affiliated with official shadcn/ui
Stepper With Help Panel Block for React
A lab sample submission in a window with a narrow step rail, a form, and a help aside that swaps its tip, warning and links per step, including dry-ice handling for -80 C.
Installation
Overview
Put the right advice next to the right field with this help-panel stepper for React with Base UI. A window framed by a hairline with a plus mark on each corner has a top bar (New sample, a "Hide help" Toggle, Back and "Next", a Shine Button and the only colored control) over three columns: a narrow vertical Steps rail (Sample, Storage, Hazards and Submit), the form, and an aside 18 rem wide. The aside holds a Tip, a Watch out and two documentation links, and its text changes with the step; choosing -80 C in Storage changes the Watch out to dry-ice handling. The Sample step checks its ID format and collection date with Field problems, Storage and Hazards use Radio Group cards, and Submit lists everything. Below the large breakpoint the same help is a Collapsible under the form, and on a phone the rail is a row of numbers. For lab, field-service and compliance forms where a mistake costs something.
FAQ
Where does the help text live?
In four short arrays at the top of the file (TIPS, WATCH, DOCS and COLD_WATCH), one entry per step. One HelpBody component draws it in the aside and in the collapsible, so the two never differ. Change an entry to change what the step says.
What does Hide help do?
It collapses the aside on large screens and gives the form its width back; the toggle is hidden below that breakpoint, where the help is already a collapsible. Nothing about the form changes.
What stays local, and how do I wire it for real?
Everything: the answers live in component state, the documentation links point at # and "Submit sample" only shows a message saying nothing was sent. To make it real, post the four answers in the advance handler on the last step and link the docs to your site.
How does the keyboard work?
The rail is one tab stop on the current step, arrow keys move between reachable steps, and Enter in the sample ID moves on after checking it. A refused step moves focus to the first field with a problem.