shadcn.io is not affiliated with official shadcn/ui
Sidebar Navigation Stepper Block for Solid
A site-setup window for a clinical trial: a rail of five steps, a top bar with progress and Save and continue, and a pane with a protocol select, role tags and switches.
Installation
Overview
Run a long setup from one screen with this sidebar stepper for Solid with Ark UI. A window framed by a hairline with a plus mark on each corner holds a top bar, a rail and a pane. The top bar names the job (Site 07 setup), counts the steps saved ("2 of 5 complete") over a hairline Progress, and holds Back and "Save and continue", a Shine Button and the only colored control. The rail is a vertical Steps list of five rows (Protocol, Site team, Consent, Supplies and Activation), each with its numbered circle, a hint and a state word. The pane has real fields: a Select of protocol versions whose facts change with the version, Tags Input for the site's roles, two Switch rows for consent, a shipment Native Select and a review list. Any row you have reached can be reopened; the Site team step wants two roles before it lets you on. On a phone the rail becomes a select reading "Step 2 of 5". For onboarding a site, a tenant or a workspace in several parts.
FAQ
Is this the Sidebar component?
No. The rail is a plain Steps list in a fixed-height window, because its rows have state (done, open, to do) rather than being places to go. If you need collapsing, a workspace menu and a phone sheet, put the catalog Sidebar in the same window and move the Steps list into its content.
How do I change the steps and fields?
STAGES holds the five rows (an id, a title and a hint), PROTOCOLS the versions with their facts, and each pane is written out in the file so a field can be added to one step without touching the others. The count in the top bar, the state words and the review list are all derived from the same state, so nothing is typed twice.
What stays local, and how do I wire it for real?
Everything: the protocol, roles, switches and shipment live in component state and are lost on reload, and "Activate site" only shows a message saying nothing was sent. To make it real, post the state in the advance handler when step is the last one, and load saved values into the initial state.
How does the keyboard work?
The rail is one tab stop on the current step. Up and Down arrows move between the rows you can reach, Home and End jump to the ends, and Enter or Space opens the focused row. After a step changes, focus moves to the new pane's heading.