shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Slide between steps instead of swapping them, with this slide transitions stepper for React 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.
