shadcn.io is not affiliated with official shadcn/ui
Staircase Cascade Stepper Block for Vue
A support ticket climbing six rows of an escalation ladder, each indented a step further, where the open row shows its owner and target time and one action hands the ticket up.
Installation
Overview
Show that each stage hands over to a higher one, with this staircase stepper for Vue with Ark UI. A plus-marked frame holds a vertical Steps list of six bordered rows, each indented a step further than the one before and joined to the next by a dotted elbow: Intake, Triage, Assignment, Processing, Resolution and Closure. Done rows shrink to a line that says how long they took, the open row shows who holds the ticket and its target time in a Data List, and the rows ahead say their target. The block's one Shine Button names the move it makes, such as "Escalate to Tier 3", and the last press closes the ticket in this demo. Rows you have reached stay pressable and Back is free. On a phone the staircase flattens to a single step of indent. For support queues, approval chains, incident handovers and any process that climbs.
FAQ
How do I change the rows?
Edit RUNGS: each has a title, a tier, an owner, a target time, how long it took, a sentence for the open card and the label of its action. The indent comes from the row's position, the elbows between rows from the order, and the second line of every row from its state, so there is nothing to keep in step by hand.
Can I change the size of the steps?
Yes. indentOf sets two custom properties per row, one for the full staircase and one for phones. Change the 1.5 rem multiplier for a steeper or shallower climb. The elbow's width is a single Tailwind class in ELBOW.
What stays local?
Which row is open is component state and is lost on reload. Nothing is escalated, nobody is paged and no customer is contacted. To make it real, send the move to your helpdesk from the go function and start the state from the ticket's current row.
How does the keyboard work?
The rows are one tab stop on the open one. Up and Down arrows move between the rows you can reach, Home and End jump to the ends, and Enter or Space opens the focused row. After a move the row's heading takes focus and a polite line says "Step 4 of 6: Processing, Tier 2".