shadcn.io is not affiliated with official shadcn/ui
Onboarding Wizard Skeleton Block for React Aria
A workspace setup wizard whose steps load in place: a four-step list beside the open step, with Continue and Back loading the next step as bars that become inputs.
Installation
Overview
Show a setup wizard while each step loads, then swap its fields in without moving anything, with this onboarding wizard skeleton for React with React Aria. A hairline frame with a plus mark on each corner holds the list of four steps at the start and the open step at the end, over a foot with Back and Continue, for Quillwort, a team-chat workspace; on a phone the list becomes a "Step 2 of 4" line. The step list, the open step's title and sentence and every field label are real from the first paint; the Input boxes, the three email fields, the three theme swatches and the review values are Skeleton bars that become the typed sample values in the same boxes. Continue and Back load the next or the previous step, so each step starts as bars, and Load fetches the open step again. The four steps share one box, so the panel keeps its height. It's built from Skeleton, Input, Field, Shine Button, Button and Guides, with a CSS entrance only. For sign-up and setup flows whose steps are fetched.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The workspace name, address, three emails and theme are typed in the component's state and INVITES``, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the content swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real content when it arrives. The bars sit in the same cells as the content, so keep one component for both. Continue on the last step says "Created … in this demo. Nothing was sent."; call your own endpoint there.
Does the panel keep its height from step to step?
Each bar and its content sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. All four steps are drawn in one grid cell and the ones that are not open are unseen and inert, so the tallest step sets the height for every step. The frame and the labels are real in both phases, and the polite line reserves two lines, so the panel is as tall before, during and after loading. A heading or a paragraph that wraps to more lines than its bars is the one thing that can still move the page, so give a text bar as many lines as the text takes at that width.
Why does Continue show bars again?
Each step is fetched when you arrive on it, so the next step's fields are bars until it loads, which takes 700 milliseconds here. The step list, the title and the labels do not change, and Continue is marked busy and ignored until the step is in. What you typed on earlier steps is kept.
How do the theme swatches work?
They are native radio buttons with a drawn page as their face, so the arrow keys move between them, Tab enters and leaves the group, and the chosen one gets a border and a check. Their greys are mixed from the foreground token, so they follow the theme.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the step…", and the polite line says what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. The pulse stops when the content is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant. The current step in the list is marked aria-current="step", the steps that are not open are inert, and each field's label is tied to its input.