shadcn.io is not affiliated with official shadcn/ui
Dense Row Stepper Block for Solid
A project setup of eight compact step buttons in a sideways-scrolling row that fades at the ends and keeps the current step in view, with a fixed step counter at its end.
Installation
Overview
Fit a long list of steps into one thin row, with this dense stepper for Solid with Ark UI. A plus-marked frame holds a Steps row of eight compact buttons, each a small icon and a title: Auth, Profile, Prefs, Team, Billing, API, Security and Deploy. The row scrolls sideways and fades at both ends, and moving a step scrolls the current button into view inside the row only, never the page. A fixed "Step 4 of 8" at the end of the row does not scroll. Each step's panel is one setting as a Switch row, and "Continue" is the block's one Shine Button. A finished step swaps its icon for a check. For setup flows with more steps than fit across a screen.
FAQ
How do I change the steps and settings?
SETUPS lists each step with its id, title, a sentence, the setting's label and a hint. START_ON lists the settings that are on when the page opens. The icon comes from the id in the Glyph component: add a branch there when you add a step.
What stays local, and how do I make it real?
The switches are component state, and the last step ends on a note that says nothing was deployed. To make it real, send the settings that are on from advance on the last step to your API.
How does the row keep the current step in view?
An effect on the step scrolls the row to the current button by its own offset, so the page never moves. After you press Continue the button slides to the middle of the row, and it does the same on load. The fade is a CSS mask, so the buttons stay real, focusable elements.
How does the keyboard work?
The row is one tab stop on the current button. Arrow keys move between the buttons you can reach, Home and End jump to the first and last, and Enter or Space opens the focused one. A button past the furthest step reached is disabled.