shadcn.io is not affiliated with official shadcn/ui
Completion Bars Stepper Block for Svelte
A strength-training session as a ruled list of five exercises, each with its own bar and set count, where ticking a set moves its bar and the programme total.
Installation
Overview
Give every step its own bar, with this completion bars stepper for Svelte with Ark UI. A plus-marked frame holds a ruled Steps list of five exercises: Warm-up, Squat, Press, Pull and Cool-down. Each row has its indicator, its name, "Sets 2 of 3" and a thin Progress bar of its own. Under the list, the open exercise shows its three sets as Checkbox rows; ticking one moves that row's bar and the programme total at the top, "9 of 15 sets", which is worked out from the ticks. Exercises open in any order, so a row is done when all its sets are ticked, not when it comes before the open one. "Next exercise" is the block's one Shine Button, and the last press shows a summary. For training plans, onboarding checklists and any job made of repeated parts.
FAQ
How do I change the exercises and the sets?
EXERCISES lists each exercise with its id, a title, a sentence and its number of sets (up to three rows are drawn; SET_KEYS is the list of rows). START is what has been ticked when the page opens; the bars, the counts and the total are all worked out from that list of ticks.
What stays local, and how do I make it real?
The ticks are component state and are lost on reload; the summary says nothing is sent to a coach. To make it real, send the key of each tick to your API from toggle and read the saved set into START.
Why does a row not turn done when I pass it?
Because exercises can be done in any order. A row is done when its sets are all ticked, and the block draws that itself from the ticks; the Steps parts supply the tabs, keys and panels. No row is disabled.
Are the bars announced?
No: each bar is hidden from assistive tech, because the same fact is in the text beside it ("Sets 2 of 3"). The polite line reads the open exercise and its count, so ticking a set is heard.