shadcn.io is not affiliated with official shadcn/ui
Stepper with Minimap Block for Svelte
A compliance rollout window with a strip of seven rectangles sized by step length that scrolls to a step when pressed and follows the scroll of a long page of steps.
Installation
Overview
Give a long page of steps a map you can see at a glance, with this minimap stepper for Svelte with Ark UI. A fixed-height window has a top bar with the title, Back and the block's one Shine Button, Next step. Under it a strip of seven small rectangles shows the steps (Organisation, Admin, Security, Team, Billing, Integrations and Compliance), each as wide as its step is long, the current one filled. Below it a scrolling page holds the seven steps, each with three lines and one control: a Select or a Switch. Pressing a rectangle scrolls to its step; scrolling the page moves the current rectangle; Next step does both and moves focus to the step's heading. A status line at the foot says where you are, and the last press only plans the rollout, in this demo. On a phone the strip becomes a row of numbered chips that scrolls sideways. For setup pages, settings with many sections and long forms.
FAQ
How does the current step follow the scroll?
A scroll handler on the page region finds the last step whose top has passed the region's edge, and the last one is current when you reach the bottom. It reads positions inside the region only, so the window never moves the page.
What sets the width of a rectangle?
Each step has a typed length in STAGES. The strip gives every rectangle that share of the row, with a minimum so a short step stays pressable. Change the numbers to match your content.
What happens with reduced motion?
Scrolling to a step jumps instead of gliding, and the colours change without a transition.
What stays local?
The switches, the selects and the finished flag live in component state. Nothing rolls out. In an app, save each control on change and make the last press call your rollout.