Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Profile Completion Stepper Block for Svelte

A profile checklist whose current step is always the first one left undone, with a Mark done toggle on each row, a percent ring and a Publish button that waits for 100%.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people finish a profile in any order while the stepper keeps pointing at the next gap, with this profile completion stepper for Svelte with Ark UI. A hairline frame with plus marks holds five Steps rows (Basic info, Logo, Bio, Service area and Insurance certificate), each with a Toggle that marks it done. The current step is never clicked: it is the first step still undone, so turning an earlier one off sends the pointer back to it. Done is drawn from the marks rather than from the step's position, so a step finished out of order still shows its check. A Circular Progress ring shows the percent and names the next best step with a line on why it matters; at 100% it reads Complete. "Publish profile" is the block's one Shine Button and says what is left until every step is done. On a phone the ring comes first. For directories, marketplaces and any profile with required parts.

FAQ

How is the current step chosen?

It is derived: the first step whose id is not in the list of done steps. Nothing sets it, so it cannot disagree with the marks. When every step is done it moves past the last one and the ring reads Complete.

How do I change the steps?

Edit STAGES: each has an id, a title, a hint for its row and a sentence on why it matters. The ring's percent, the counts and the next best step are drawn from it and the done list.

Why is Publish not disabled?

It is marked aria-disabled until every step is done, so it keeps its place and focus, and pressing it early says how many steps are left. After 100% it confirms in this demo and nothing goes live.

What stays local?

The marks live in component state and are lost on reload. In an app, derive each step's done state from your profile record instead of a toggle, and keep the same helper that finds the first gap.

How does the keyboard work?

Tab visits each Mark done toggle in turn; Space or Enter flips it. The list is not a tab group, because the current step follows the marks and not a choice.

Does it work right to left?

Yes. The markers, rows and toggles sit on the correct sides, and the percent and counts are marked so they keep their order.

All 100 stepper blocks