shadcn.io is not affiliated with official shadcn/ui
Store Setup Wizard Form Block for React
A five-step store setup with a step rail (store, products, shipping, payments, launch) that marks steps done, current, optional or locked, checks each step on Continue and ends in a summary.
Installation
Overview
Walk someone through setup one step at a time with this wizard form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner, split into a rail and a step pane. The rail lists five steps (Store, Products, Shipping, Payments and Launch), each marked Done, Current, Optional, Up next or Locked; a done step can be reopened, and pressing a locked one says which step to finish first. The pane holds the current step's form: a store name and currency, an optional first product, a flat shipping rate with a Switch for free shipping, one required payment choice, and finally a summary of everything with Finish. Continue checks only its own step, names what is wrong in words and focuses the field; Products can be skipped. The pane keeps one height, so the foot never moves, and the Shine Button is the only colored control. On a phone the rail becomes "Step 2 of 5, Products" with a bar and a step select. It's built from Input, Native Select, Switch, Shine Button and Guides, with a CSS entrance only. For store and workspace setup, account activation, imports and any task that is easier in ordered steps.
FAQ
How do I change the steps and their fields?
Edit STEPS for the rail (each has an id, a name, a line and whether it is optional). Each step's form is a block in the component, or one of the small step components, and problemOf holds the rule for each step, so a new step needs a rail entry, a pane and a rule.
How do locked steps work?
Only the steps up to the furthest one reached can be opened. Continue moves that point forward when the current step passes its check, and the rail never lets a visitor jump past it: a locked step is announced as disabled and pressing it says "Finish Shipping first." in the status line, naming the step that is actually next. Steps already done can be reopened in any order, and their answers are kept.
How does it work with a keyboard and a screen reader?
The rail is a navigation landmark with an ordered list; the current step has aria-current="step" and each button reads its name and state ("Shipping, Done"). The step's heading is in the pane and a failed Continue moves focus to the first field with a problem. The status line in the foot is the one polite region and says what was saved and which step is now open.
How does it look on a phone?
The rail is replaced by a line "Step 2 of 5, Products", a thin bar and a select to jump to a step; locked steps are marked "(locked)" in the select and refused with the same message. Back, Skip and Continue share the pinned foot.
What stays local, and how do I connect it for real?
The draft lives in the tab, as the rail says, and Finish says the store launched in this demo and publishes nothing. To make it real, save each step's answers to your server from the submit handler before moving on, so a refresh does not lose them, and create the store on Finish.
Related
- Pro
Review and Submit Form
Dialogs and layoutsA review step: three sections of typed answers that each edit in place in the same boxes, a side cell of what changed, a Submit that names the section to finish, and a lock after a local submit.
- Pro
Three whole-card radio choices for how a workspace starts (blank, from a template, imported from a file), each with an icon, a description and the time it takes, and a line that says what comes next.
- Pro
Listing Editor Form With Sidebar
Dialogs and layoutsA listing editor in a fixed-height window with a section index that follows the scroll, statuses worked out from the fields, and one Save listing action in the top bar.
- Pro
Address Form with ZIP Help
Checkout and addressA six-column address grid that never changes size: street, an apartment line behind a quiet button, city, a state select and a ZIP code that fills the city and state from a typed table of six.
- Pro
Brand Colour Picker Form
Numbers and pickersA brand colour field that makes a scale: a hex input and the colour picker kept in sync, eight named presets, and five derived steps by lightness, each with its hex and a copy button.
- Pro
Ship-To Country Select Form
SelectsA combobox of 20 countries in four areas, each with a two-letter tile and calling code, where four are out of reach with the reason in the row and a band gives what a parcel to the chosen country needs.