shadcn.io is not affiliated with official shadcn/ui
Onboarding Flow CRUD Block for Svelte
A SaaS onboarding builder: flows with a derived length and a Draft or Live word, a start picked from three tiles and a name, steps that open in place to rename, retype, move and remove, Make live that needs two steps, and Delete with Undo.
Installation
Overview
Shape what a new customer sees first, with this onboarding flow builder for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a list of flows in a frame of fixed height, each with its name, "4 steps, about 3 min" worked out from its steps, and a Draft or Live word. New flow, the only Shine Button, opens a card at the top of the list: three tiles of native radios pick a start, Blank, Product tour or Checklist, a name completes it, and the flow is made as a Draft with that start's steps and opened in place. A flow opens as a Collapsible to its steps, each with a title that edits where it sits in an Editable, a kind in a Native Select, Move earlier, Move later and Remove, and Add a step at the foot, up to eight. Make live needs two steps, and a live flow can't be deleted until it is back in draft. The foot says what changed and offers an Undo. The frame is ruled by Guides, with an Empty state. For product tours, setup checklists and any first-run sequence.
FAQ
How do I fill it with my flows and steps?
Edit START_LINES (a name, yes or no for live, and the steps as kind=title joined by semicolons) and STARTS for the three tiles. The kinds and the seconds each one takes are in KINDS; the length of a flow is the sum, shown in minutes.
What does the builder refuse?
A flow without a name or with a name that another flow has, Make live with fewer than two steps, a ninth step, an empty step title and deleting a live flow. Each refusal is a sentence in the foot, and a live flow's Delete button is aria-disabled so it still answers when pressed.
How do I reorder steps without dragging?
Each step has Move earlier and Move later buttons, named for the step. After a move focus stays on the same direction button of the step that moved, or on the other one if the step has reached the end, so a keyboard user can keep pressing. The first step's earlier button and the last step's later button are aria-disabled.
What does Undo bring back?
The last change to a flow or its steps: a created draft, going live, a deleted flow, an added, moved, retyped, renamed or removed step. The whole list returns as it was and focus goes back to the control you used.