shadcn.io is not affiliated with official shadcn/ui
Chevron Breadcrumb Stepper Block for Vue
A hiring pipeline drawn as five arrow-shaped segments for one candidate, with a segment per stage, a note and owner per stage, and one Shine Button that advances the candidate.
Installation
Overview
Show where a record sits in a pipeline with this chevron stepper for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a Steps strip of five arrow-shaped segments for one candidate: Applied, Screen, Interview, Offer and Hired. Passed stages are solid with a check, the current one is heavier and carries a dot, and later ones are muted. Each segment is a real button, so a passed stage can be reopened while later ones stay off until the candidate gets there. Under the strip a Data List shows who owns the stage and how long it usually takes, and the foot has a ghost "Move back a stage" and the block's one Shine Button, which reads "Advance to Interview" and moves on. On a phone the other segments shrink to numbers and the current one keeps its name. For recruiting, order, ticket and approval flows.
FAQ
How do I change the stages and the candidate?
STAGES lists the five stages with an id, title, a one-sentence note, the owner and how long the stage usually takes. The candidate and role are plain text in the panel rows and the completed panel. To add a stage, add it to STAGES; the strip, the panels and the "Advance to" label all follow the list.
What stays local, and how do I make it real?
Everything. The stage is component state and the last step ends on "Hired in this demo": no offer letter is sent and nobody is told. To make it real, call your API from the advance handler with the candidate id and the next stage, and keep the strip in step with the response.
How are the arrows drawn?
Each segment is the step button itself, cut with a clip-path polygon: a flat start on the first, a notch and a point on the middle ones and a notch on the last. They overlap by a few pixels so a thin gap shows between them. The shapes are plain classes, so you can change the depth of the points in one place.
Does it work right to left?
Yes. The strip reads from the right, each segment is flipped with rtl:-scale-x-100 so the points face the end of the line, and the label inside is flipped back so the text is not mirrored. The arrow keys swap sides too.
How does the keyboard work?
The strip is one tab stop on the current stage. Arrow keys move focus between the stages you can reach, Home and End jump to the first and last, and Enter or Space opens the focused one. After any move the new stage heading takes focus and a polite line in the foot reads "Step 3 of 5: Interview".