shadcn.io is not affiliated with official shadcn/ui
Comparison Paths Stepper Block for Svelte
A guitar setup booking that lays a quick tune-up and a full setup side by side, with optional steps you can leave out and a live count of how much sooner one finishes.
Installation
Overview
Let people compare two ways through a job before they start, with this comparison stepper for Svelte with Ark UI. A hairline frame with plus marks holds two choice cards, Quick tune-up and Full setup, each with its step count and minutes. Under them one sentence says how much sooner one path finishes, worked out from the two lists as they stand. Below that sit the two lists side by side: every step has its minutes and a line on what you control in it. The chosen list is live, so an optional step has a Checkbox to leave it out and both the totals and the sentence follow; the other list is inert and dimmed. "Request" is the block's one Shine Button and nothing is booked. For service menus, plans with different depth and any either-or choice.
FAQ
How do I change the paths?
Edit QUICK and FULL at the top of the file. Each step has an id, a title, minutes, a line on what the customer controls and whether it is optional. The cards, the lists, the totals and the "sooner" sentence are all drawn from them.
What can I leave out?
Steps marked optional. Unticking Include strikes the step through, takes its minutes off that path and updates the other numbers. Steps without the mark show "Always part of this path". The list that is not chosen cannot be changed until you choose it.
How is the difference worked out?
It is the full path's minutes minus the quick path's, each counting only the steps still included. If the optional steps change the order, the sentence names the other path, and if they tie it says both take the same time.
What stays local?
The chosen path, the left-out steps and the request are component state, lost on reload. Pressing Request only changes the status line to say it was requested in this demo and turns the button into Undo request. To book for real, send path and skipped from that handler.