shadcn.io is not affiliated with official shadcn/ui
Drag Reorder Stepper Block for Ark UI
A five-step design sprint whose steps you reorder by dragging a grip, by keyboard pick-up or by Move buttons, with numbers and days following and a soft ordering warning.
Installation
Overview
Let people shape the order of a process, with this reorderable stepper for React with Ark UI. A hairline frame with plus marks holds a vertical Steps rail at the start with five numbered steps (Research, Wireframe, Prototype, Test and Iterate) and the open step's panel at the end. Each row has a grip you drag with a pointer, or pick up with Space, move with the arrow keys, Home and End, drop with Space and cancel with Escape, plus two buttons that move it one place. The numbers and the sprint days follow the new order, the open step stays with its row, and a soft note, "Test needs Prototype first", shows when the order is odd and never blocks it. "Reset order" restores the first plan, the block's one Shine Button confirms, and a polite line reads every move ("Moved to position 3 of 5"). For planners, onboarding builders and checklists whose order is up to the team.
FAQ
How is the drag made?
With no library. A press on a grip captures the pointer on the rail, moving over another row swaps the two in the list, and letting go drops it. The rows move in the page while the grip keeps the capture, and focus returns to the control you used after every move.
Is there a route without a pointer?
Yes, two. Space on a grip picks the step up and the arrow keys, Home and End move it until Space drops it, or Escape puts it back. The Move earlier and Move later buttons work on their own, which also covers touch screens where dragging is awkward. Each move is read out in the polite line.
What is the Test needs Prototype first note?
A soft rule on the order, checked on every move. It reserves its line so the page does not shift, and it never stops you: the order stays yours.
What stays local?
The order and the open step are component state, lost on reload; nothing is scheduled. To keep it, send the list of ids to your server in the move handlers, and start from the saved list.