shadcn.io is not affiliated with official shadcn/ui
Fraction Counter Stepper Block for Solid
A boat pre-flight where a large 2 / 5 counter with a rolling number and a thin bar is the stepper, with the check, a sentence and two arrow buttons beside it.
Installation
Overview
Make the count the progress display, with this fraction counter stepper for Solid with Ark UI. A framed panel splits in two: at the start a large "2 / 5" whose number rolls when it changes, over a thin Progress bar, and at the end the name of the check, one sentence and two buttons, a Previous arrow and the block's one Shine Button. There is no list of steps at all: Steps only holds a panel for each of the five pre-flight checks, Hull, Engine, Safety kit, Charts and Cast off. The left and right arrows step from either button, and a polite line reads "Check 2 of 5: Engine". For checklists, tours and any flow where a number is enough.
FAQ
Why is there no list of steps?
The counter is the whole display. Without a list there are no triggers to maintain; the two buttons are the only controls, and the bar and the number carry the same meaning as the words in the status line.
Which keys work?
Tab goes to the Previous arrow and then Next. On either button the right arrow (left in right-to-left) goes forward and the left arrow goes back; Up and Down do the same. The new check's heading takes focus after each move.
How does the number roll?
It is the catalog Sliding Number, outside the step panels so it stays the same element and rolls its digits. It is hidden from screen readers, which hear the status line instead.