shadcn.io is not affiliated with official shadcn/ui
Ribbon Tape Stepper Block for Svelte
A drawn ribbon in five joined lengths for a made-to-measure suit order, with folded joins, a swallow-tail end, a note per stage and one Shine Button to mark each stage done.
Installation
Overview
Draw a process as one length of tape with this ribbon stepper for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a flat band in five joined lengths for one suit order: Measure, Cut, Assemble, Finish and Deliver. A small fold shades each join and the last length ends in a swallow tail. Finished lengths are solid with a check, the current one is outlined with a dashed line, and later ones are hatched. Each length is a real Steps button that carries its own name, so a finished stage can be reopened. A Data List under the ribbon holds the stage's note, who works on it and how long it takes, and "Mark cut done" is the block's one Shine Button. On a phone the ribbon keeps its width and only the current length shows its name. For made-to-order, repair and fulfilment flows.
FAQ
How do I change the stages and the notes?
STAGES lists the five lengths with an id, title, a sentence, the note the tailor writes down, who is on it and how many days it takes. The completed panel counts the lengths from the list. To add a length, add it to STAGES; the ribbon, the panels and the button label follow.
What stays local, and how do I make it real?
Everything. The stage is component state and the last step ends on "Delivered in this demo": nothing is ordered and nobody is called. To make it real, call your API from the advance handler with the order number and the stage you are marking done.
How is the ribbon drawn?
With CSS only. Each length is the step button with a hatched or solid background, a small clipped triangle at its end for the fold, and a clip-path on the last one for the swallow tail. The hatching is a repeating-linear-gradient in the foreground tone, so it follows the theme.
Does it work right to left?
Yes. The ribbon reads from the right, each length is flipped with rtl:-scale-x-100 so the folds and the tail face the end of the line, and the label inside is flipped back. The arrow keys swap sides.