shadcn.io is not affiliated with official shadcn/ui
Slide Transitions Stepper Block for Vue
A four-panel poster order on a track that slides one panel at a time, with a short bar under the counter, Back and Next buttons, and Left and Right arrow keys.
Installation
Overview
Slide between steps instead of swapping them, with this slide transitions stepper for Vue with Ark UI. A plus-marked panel holds a counter ("Step 2 of 4") with a short bar under it that slides to the current step, a read-only list that names the four steps, and a fixed-height window with four panels side by side on a track. The track slides one panel at a time, and panels out of view are inert so Tab never reaches them. The panels are a size Segment Group, a headline Input, a paper Radio Group and a Data List with the total. The foot has an outline Back and the block's one Shine Button.
FAQ
How does the track slide?
The four panels sit in a flex row four times the window wide, and the row moves by a quarter of its width for each step with a CSS transform. In a right-to-left layout it moves the other way. Under reduced motion the transition is removed and the track jumps.
How do the arrow keys work?
Focus the window (it is a tab stop with a visible ring) and press Left or Right to slide. In a right-to-left layout the keys swap. The keys only act when the window itself has focus, so they never fight a text field or a radio group inside a panel.
How is the total worked out?
SIZES holds a price per size and PAPERS an extra per paper; the total is their sum, worked out each time from the choices.
What stays local, and how do I make it real?
Everything. The choices live in component state, and Order poster ends on a line that says "Ordered in this demo: nothing was printed". To make it real, send size, headline and paper from the advance handler on the last step to your API.