Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Numbered Steps Banner Block for Svelte

A setup tracker for a workspace tool: four numbered steps in a row joined by a line, finished ones checked, the current one ringed, and a Resume button under it.

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

A numbered steps banner for Svelte with Ark UI, for sending someone back to a half-finished setup. A title with "Step 3 of 4" sits above a band under its own rule, which holds an ordered list of four steps laid out in a row. Each step is a numbered circle (a filled check when finished, a ringed number for the current step, a muted number for the next), a line to the following step that is solid up to the current one, and a title; a Shine Button link, Resume, sits under the current step. It's built from Shine Button and Guides, and it follows your theme.

FAQ

How do I change the steps?

Edit STEPS at the top of the file: each entry has a title and a state (done, current or next). Mark exactly one step current; the "Step 3 of 4" in the header is text you update with it.

Why is it a list and not the Steps component?

This tracker only reports progress: nothing in it is a tab or a button that moves you, so it is an ordered list with the current step marked aria-current="step" and each step's state written out for screen readers ("Completed: Connect your data"). The Resume link is the one action.

How do I point Resume at the right place?

Resume is a link (href="#"): send it to the current step's page. Its asChild receives the button's props: spread them onto your router's link.

Why has the block no line at the bottom?

It ends on its band, and the next block's top rule is its bottom edge, so a closing rule would double it.

What happens on a narrow phone?

Each step is at least 11 rem wide, so on a narrow screen the row scrolls sideways, and on load the current step is brought to the middle, so the Resume button is in view. The row holds a focusable button, so keyboard users can reach it; it needs no extra tab stop. From a tablet up the four steps fit and nothing scrolls.

Does it work right to left?

Yes. The steps run from the inline start, the lines and the circles follow, and the scroll position is worked out from where the step is on screen, so the current step is centred in either direction.

All 100 banner blocks