shadcn.io is not affiliated with official shadcn/ui
Priority Indicators Stepper Block for Svelte
A boiler service run sheet of five jobs with signal bars and a word for each priority, a pill pair that sorts by priority while the job numbers stay, and a switch that keeps only critical and high jobs.
Installation
Overview
Show how urgent each step is without losing the order of work, with this priority stepper for Svelte with Ark UI. A plus-marked frame holds a ruled list built on a read-only Steps rail: the five jobs of a boiler service in sequence, each with its number, its place and time, and a priority drawn as one to four signal bars with the word beside it (Critical, High, Medium or Low). Two pills re-order the list, "In sequence" or "By priority", and the job numbers stay on their rows so the order of work is never lost. A Switch keeps only the critical and high jobs. The list holds its height whichever you choose, and one polite line says what shows: "Showing 3 of 5, by priority". "Mark job done" is the block's one Shine Button and walks the sequence, turning each number into a check. For maintenance, incident runbooks, release checklists and triage.
FAQ
Why bars and a word, not a colour?
Colour alone fails for people who cannot tell the hues apart and disappears in a different theme. The bars change height and count, so the level is a shape, and the word beside it says it in text. Both are drawn from one level number per job, so they cannot disagree.
What does By priority change?
Only the order shown. visibleOf sorts a copy of the jobs by level, highest first, with the sequence number breaking ties, and the numbers stay on their rows: "2" is still the second job to do even when it is listed first. The progress through the sequence is unaffected, and the Shine Button always works on the next job in sequence, not the top of the list.
What does the switch hide, and does the page move?
Jobs below High. They are not removed from the run: they still count as jobs and are still marked done in sequence. The list sits in a box as tall as five rows, so hiding two does not move the status line or the button.
How does the keyboard work?
Tab reaches the two pills, the switch and the button. Arrow keys switch the pill, Space flips the switch, and Enter or Space presses the button. The rows are a plain list, so a screen reader reads each as "Job title, Critical" with "Done:" in front once it is finished, and the status line speaks every change.