shadcn.io is not affiliated with official shadcn/ui
Linear Progress Stepper Block for Svelte
A four-stage film post-production tracker with diamond markers on one continuous bar that fills to the current stage, and a panel of what is due at each stage.
Installation
Overview
Show how far a job has come on a single line, with this linear progress stepper for Svelte with Ark UI. A plus-marked frame holds a Steps row of four diamond markers on one continuous bar: Ingest, Grade, Master and Deliver, with each label above its marker. The bar fills in foreground tones up to the marker you are on and moves one marker at a time, and the markers you have reached are buttons while later ones stay off. Under the bar the stage's panel says what is due and on which day, with a Data List of its three checks. "Mark stage complete" is the block's one Shine Button, relabelled for each stage. On a phone only the current marker keeps its label, with the stage named in a line under the bar. For production pipelines, release trains and any job with a few named stages.
FAQ
How do I change the stages?
STAGES lists each stage with its id, title, due date as an ISO string, a sentence, three rows and the button's label. The bar's fill and the "2 of 4 stages" count come from the step number. To add a stage, add it to STAGES and change grid-cols-4 and the 12.5% insets of the bar to match: the insets are half of one cell, so they are 100 / (2 x stages) percent.
What stays local, and how do I make it real?
Everything. The stage lives in component state and the last press ends on "Master delivered", which says it happened in this demo: no file was sent. To make it real, send the stage's id from advance to your API and move on only when it answers.
Is the bar part of the stepper?
It is a drawing under the real buttons and is hidden from assistive tech. The markers are the Steps triggers, so a screen reader hears "Grade" with its position and the polite line reads "Stage 2 of 4: Grade" after each move. The diamond marks the state with its fill: hollow for upcoming, solid for done, and a ring around the current one.
How does the keyboard work?
The row is one tab stop on the current marker. Arrow keys move between the markers you can reach, Home and End jump to the ends, and Enter or Space opens the focused one; in a right-to-left layout the arrows swap and the bar fills from the other side. Markers past the furthest stage reached are disabled.